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Avant-propos 


Trente rais se réunissent autour d’un moyeu. 

C'est de son vide que dépend l'usage du char. 

On pétrit de la terre glaise pour faire des vases. 

C’est de son vide que dépend l'usage des vases. 

On perce des portes et des fenêtres pour faire une maison. 
C’est de leur vide que dépend l'usage de la maison. 

C'est pourquoi l'utilité vient de l'être, l'usage du non-être. 
Lao-Tseu 


Chaque jour, l'informatique prend une place grandissante dans notre vie quo- 
tidienne ; au bureau, dans la rue, mais aussi dans nos foyers où l'ordinateur a 
trouvé sa place dans le salon entre la bibliothèque et la chaîne hi-fi. La plupart des 
instruments ménagers : machine à laver, four à micro-ondes, téléphone, lecteur DVD, 
etc. fonctionnent à l’aide d’un microprocesseur et d'un logiciel. 


Ces outils, rendus « intelligents » par l'informatique, ont été conçus pour nous 
rendre service, nous faciliter la vie. Ec effectivement, ils nous aident et nous permettent 
de réaliser facilement certaines tâches qui, sans eux, auraient demandé beaucoup plus 
de temps et d'énergie. 


Mais qui n'a jamais éprouvé des difficultés à les utiliser ? Qui n’a pas eu à ouvrir 
le mode d'emploi de sa box avant d'enregistrer son émission favorite ? Qui n'a jamais 
ressenti ce sentiment de frustration de ne pas pouvoir utiliser pleinement un objet 
faute de savoir comment s’en servir ? En d'autres termes, nul doute que ces machines 
nous sont utiles, mais elles ne sont pas toujours facilement utilisables. 


En fait, l'usage d’un instrument se caractérise selon deux axes : son utilité et son 
utilisabilité!. 


1. « Utilisabilité » est une traduction littérale de usability qui est Le cerme employé par les ergonomes 
anglo-saxons. Usability aurait aussi pu être traduit par « ergonomie », mais ce mot à un sens plus 
large, L'ergonomie est une science qui a pour objet l'étude du travail humain, tandis que l’utilisabilité 
est une caractéristique de l’objet lui-même. C'est done par abus de langage que nous emploierons 
parfois dans cet ouvrage le terme « ergonomie » à la place de « ucilisabilité ». 
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L'utilité est la capacité de l’objet à servir la réalisation d’une activité humaine, 
tandis que l’utilisabilité représente la facilité d'emploi de cet objet. 

Considérons, par exemple, deux objets dédiés à une utilisation similaire : la 
combinaison de plongée et le scaphandre. Ils relèvent de la même utilité : permettre 
de se déplacer sous l’eau. Cependant, le scaphandre, du fait de son poids et de la 
connexion permanente avec la source d'air, est d’une utilisabilité moindre que la 
combinaison qui offre une plus grande autonomie. Les plongeurs l'ont vite compris : 
depuis que la combinaison de plongée a été inventée, le scaphandre n'est quasiment 
plus utilisé. L'instrument dont l’utilisabilité est la meilleure a été choisi. 


L'utilisabilité est la capacité de l’objet à être facilement utilisé par une personne 
donnée pour réaliser la tâche pour laquelle il a été conçu. La notion d’utilisabilité 
englobe à la fois la performance de réalisation de la tâche, la satisfaction que procure 
l'utilisation de l’objet et la facilité avec laquelle on apprend à s'en servir. 


Certe qualité concerne tout type d’instrument destiné à aider l'être humain. Nous 
nous intéressons ici à son application à l'outil informatique, c'est-à-dire le logiciel. 


Les enjeux de l'ergonomie 


Lorsqu'un logiciel est employé à des fins professionnelles, son utilisabilité est essen- 
tielle car elle détermine la performance du salarié. Un logiciel facilement utilisable 
permettra de réaliser rapidement la tâche prévue, sans perte de temps et avec moins 
de stress. Pour une entreprise, l’utilisabilité est un critère de choix important ; non 
seulement la productivité en dépend, mais aussi la qualité de l'atmosphère de travail. 


La vie de tous les jours nous le montre : l'ergonomie conditionne la réussite 
commerciale d’une technologie. N'est-ce pas la facilité d'utilisation qui a permis à 
Apple de tenir le haut du marché chez tous les « allergiques à l'informatique », tandis 
qu’à l'inverse, Linux comblait les informaticiens par sa puissance et sa concision ? 


Le succès commercial d'un produit informatique n'est pas uniquement lié à sa 
technicité. Le choix du consommateur se porte vers le logiciel le mieux adapté à 
son besoin et à ses compétences. L'utilisabilité est un critère de choix au moment 
de l'achat, au même titre que le coût ou l'esthétisme du produit. Mais c’est aussi, et 
surtout, un facteur de fidélisation ; le client achète « les yeux fermés » lorsqu'il est sûr 
de pouvoir utiliser facilement le produit. À tel point qu'en général, il est prêt à faire 
des concessions en termes de fonctionnalités et de performances lorsqu'il sait l'outil 
agréable à utiliser et qu’il ne perdra pas de temps à apprendre à s'en servir. 


Échaudés par quelques mauvaises expériences, les clients sont vigilants. Lors du 
développement de systèmes « à risque » tels que les salles de contrôle de centrale 
nucléaire ou les centres de contrôle de la circulation aérienne, l’utilisabilité est 
maintenant considérée comme un critère d'acceptation à la livraison du système final. 


Une démarche pragmatique 


La clé de la réussite d’un projet informatique n'est donc pas seulement technique, c'est 
aussi la prise en compte, tout au long du développement, de lutilisabilité du logiciel. 
Pour cela, il importe de mettre en place un processus itératif. En effet, dans le domaine 
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du développement logiciel, « l'enfer est pavé de bonnes intentions » et malgré toute 
l'attention qu'on y porte, jamais la première version ne sera satisfaisante, Plutôt que 
de chercher à faire bien du premier coup, il est préférable de réaliser rapidement 
une maquette et de la faire tester par les utilisateurs. Chaque nouvelle maquette va 
s'enrichir des améliorations demandées par les utilisateurs. Un prototype va émerger 
et les utilisateurs vont progressivement être en mesure de réaliser des tâches de plus 
en plus complexes pour lesquelles le logiciel est conçu. 


Bien entendu, travailler à partir de prototypes et impliquer l'utilisateur dans la 
conception du produit ne veut pas dire partir de zéro et réinventer la roue ! De 
nombreuses expérimentations ont été menées dans le domaine du logiciel. Elles ont 
permis d'élaborer un certain nombre de recommandations qui vont servir de point de 
départ au développement du premier prototype. Suivre ces recommandations permet 
d'éviter les principaux écueils afin de se concentrer sur les particularités du logiciel 
développé. 


Dans ce livre, nous donnons pour chacune des étapes de la conception des règles 
visant à améliorer l’utilisabilité. Mais il ne s’agit pas de recettes de cuisine ! Certaines 
de ces règles sont contradictoires tandis que d’autres peuvent être remises en cause 
en fonction du contexte. Elles ne doivent pas être appliquées à la lettre sans prendre 
en compte l’utilisation effective de l'application. Ces recommandations permettent 
d'orienter les choix de conception en s'appuyant sur les expérimentations menées 
dans le domaine. Il reste ensuite à valider le design de l'interface en situation réelle : 
c'est le rôle des tests utilisateur. 


Audience 


Cet ouvrage est un guide pratique de conception des interfaces. Il donne les règles 
et les principes ergonomiques à prendre en compte à chaque étape de la définition 
de l'interface utilisateur, qu’il s'agisse d’un logiciel, d’une application web, d'un site 
internet, d'une application mobile ou tactile. 


Ce livre s'adresse à toutes les personnes impliquées dans la conception et le 
développement d’interfaces, en particulier celles en charge des spécifications er de 
l'interface homme-machine, mais aussi les chefs de projet et Les responsables marketing. 
Dans la mesure où ces interfaces se rencontrent et s’utilisent au quotidien, ce livre 
concerne autant les applications logicielles que les sites web, utilisés aussi bien 
au bureau, chez soi ou en mobilité. Par ailleurs, il intéressera également ceux qui 
souhaitent évaluer l'utilisabilité d’un logiciel en vue d'en faire l'acquisition pour leur 
propre usage ou pour celui de leur entreprise. 


Dans la mesure où l’utilisabilité naît de la relation qui s'établit entre le logiciel 
et son utilisateur, nous nous intéresserons principalement à la conception des inter- 
faces homme-machine. Dans un système informatique, l'interface homme-machine 
représente la partie du logiciel qui permet à l'utilisateur d'interagir avec le programme 
informatique. Cependant l’utilisabilité relève également de la conception globale du 
logiciel, voire également de la ligne de produits dans laquelle il se positionne. 
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La cinquième édition de l'ouvrage 


Depuis 10 ans, cet ouvrage à été lu, relu, exploité et utilisé par de nombreux 
chefs de projet, développeurs et concepteurs d'interface. En 10 ans, les interfaces 
et l'informatique en général ont beaucoup évolué. Nous ne pouvions plus réduire la 
conception des interfaces aux logiciels et au web. Désormais, les interfaces se déclinent 
également sur d’autres dispositifs, en particulier les smartphones et les tablettes tactiles. 


Les dix ans de l'ouvrage correspondent à peu près aux dix ans d'Usabilis. Dix années 
au cours desquelles nous avons mis en œuvre les recommandations et les méthodes de 
ce livre. Ces expériences partagées sur des projets variés nous ont montré l'importance 
et la richesse des regards croisés et du mélange de compétences pour concevoir une 
interface réussie. Nous avons donc décidé d'écrire cette cinquième édition à trois afin 
que chacun puisse apporter sa propre sensibilité à l'ouvrage. 


Pour cette édition, nous ne pouvions plus conserver cette dichotomie logiciel/web 
qui ne correspondait plus à la réalité du terrain. C’est pourquoi, nous avons choisi une 
présentation transversale du processus de conception, indépendamment des dispositifs 
qui supportent les interfaces. 


Les premières éditions de l'ouvrage ont été construites à partir du support des 
formations Usabilis et des cours de Jean-François Nogier. La cinquième édition s’est 
enrichie de l'expérience acquise lors de nos interventions auprès des équipes de 
développement et des éditeurs de logiciel. Il était donc naturel d'introduire également 
des exemples concrets d'applications pour lesquelles nous avons mis en œuvre la 
démarche ergonomique. Nous remercions nos clients qui ont accepté de dévoiler ainsi 
une partie de leurs « secrets de fabrique ». 


Organisation du livre 


L'organisation de cette cinquième édition s’est naturellement construite en s'appuyant 
sur les différentes étapes du processus de conception orienté utilisateur, qui fournit 
une base commune et invariante quelle que soit l'interface à créer. 


Cette approche présente également l'intérêt de répondre chapitre par chapitre aux 
questions que se posent les concepteurs d’interface au fur et à mesure de la réalisation : 


e Le premier chapitre, Concevoir des interfaces ergonomiques, introduit la 
démarche de conception ergonomique et les enjeux relatifs à la diversité des 
interfaces actuelles et à venir. 

e Dans le deuxième chapitre, Organiser l’information, nous abordons la question 
de la définition du contenu informationnel et celle de l’organisation des 
informations à l'écran. 

e Dans le troisième chapitre, Construire la navigation, nous présentons les 
méthodes pour concevoir la navigation ainsi que les éléments de l'interface 
qui permettent de réaliser le système de navigation. 

+ Le quatrième chapitre, Créer l'interaction, regroupe les recommandations 
ergonomiques concernant les moyens d'interaction (clavier, souris, doigt} et les 
éléments d'interaction affichés à l’écran, de manière à descendre plus en détail 
dans la définition de l'interface. 
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Le cinquième chapitre, Communiquer avec l’utilisateur, traite du langage de 
l'interface, c’est-à-dire la manière dont l'application informatique dialogue avec 
l'utilisateur (libellés, messages). Nous abordons également dans ce chapitre le 
traitement des erreurs et l’aide en ligne. 


Le sixième chapitre, Présenter l'information, fournit les recommandations pour 
habiller graphiquement les écrans : choix des couleurs, techniques de mise en 
évidence, choix des polices de caractères. 


Le septième et dernier chapitre, Méthodes de conception des interfaces, décrit 
les différentes méthodes permettant de prendre en compte l'ergonomie au 
cours du développement d'un logiciel, en particulier les tests utilisateur et le 
maquettage/prototypage. Ce chapitre s'adresse aux chefs de projet désireux 
de suivre un processus de conception « orienté utilisateur ». Il intéressera 
également les personnes en charge de l'évaluation d'un logiciel car il présente 
différentes méthodes d'évaluation. 


En annexe, on trouvera une présentation des travaux majeurs en psychologie 
cognitive sur lesquels s'appuie l'ergonomie du logiciel, en particulier le modèle 
du processeur humain et la notion de critères ergonomiques. Deux check-lists 
se trouvent à la fin de l'ouvrage. La première permet d'évaluer rapidement la 
qualité ergonomique d’un logiciel. La seconde, dédiée aux applications web, sert 
à vérifier que les critères d’utilisabilité sont pris en compte lors de la conception 
d’un site internet. 

Enûn, pour en savoir plus sur la pratique de l’utilisabilité, la bibliographie 
fournit, outre les principaux ouvrages du domaine, les adresses internet des 
sites traitant de l’ergonomie informatique et des ressources en ligne pour la 
conception d’interfaces. 


Suppléments en ligne 


Retrouvez des compléments de l'ouvrage sur le blog des auteurs : Usaddict, Ressources 


sur l'ergonomie des interfaces (www.ergonomie-interface.com). 
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Ce livre est le fruit du parcours professionnel de Jean-François Nogier. Tout 
d'abord au centre scientifique IBM France, il a mené des recherches sur la com- 
munication entre l’homme et la machine, s'intéressant à la façon dont l’ordinateur 
aurait pu produire des textes semblables à ceux d'un être humain. Ensuite à Thales 
(ex-Thomson-CSF), il a eu l'occasion de participer au développement de centres de 
contrôle aérien et de conseiller les équipes logicielles sur la conception des postes 
de travail pour les aiguilleurs du ciel. Puis comme web manager, il a participé à la 
conception des sites intranet et conduit les programmes internes liés aux technologies 
web. 


En 2002, Jean-François Nogier fonde Usabilis, une société de conseil en ergonomie, 
spécialisée dans la conception des interfaces. Depuis 10 ans, Usabilis accompagne les 
maîtrises d'ouvrage dans la conception des services en ligne et des produits logiciels. 


Thierry Bouillot 


Passionné par la rencontre de la psychologie cognitive er le monde multimédia, 
Thierry Bouillot s'est associé naturellement à cet ouvrage. Formé à la recherche fon- 
damentale en psychologie cognitive, il a d’abord étudié les mécanismes de l’attention 
en laboratoire universitaire à Angers, Bruxelles et Toulouse. Lors de son doctorat, il 
participe à la mise au point de méthodes d'évaluation pour l’ISO au LAB pour PSA 
Peugeot Citroën. 


Thierry a rejoint Usabilis en qualité de consultant en ergonomie informatique, 
spécialiste de la conception d’interfaces et de l'expérience utilisateur ; il est également 
chargé de l'éditorial et de l'animation du blog Usaddicr, l'ergonomie des interfaces. 


Jules Leclerc 


Designer d'interaction, Jules Leclerc est issu d'un parcours dans la conception 
de produits innovants et d’interfaces graphiques. Formé à l'École de design Nantes 
Atlantique, sa priorité est de concevoir une expérience utilisateur de qualité. 


Jules Leclerc privilégie une démarche centrée sur l'usage dans les différents projets 
sut lesquels il est intervenu. 11 débute son parcours professionnel dans la société Violet 
pour laquelle il travaille sur l'interaction du lapin Nabaztag. Il intègre ensuite une 
agence de communication dans laquelle il est responsable de la partie numérique. 
Aujourd'hui consultant chez Usabilis, il intervient sur la conception de logiciels, sites 
web, applications mobiles ou interfaces TV ainsi que sur leur design graphique. 
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Ergonomie des interfaces 


« C'est ma “bible” au travail | 


En tant que conceptrice multimédia, j'utilise le manuel des interfaces utilisateurs pour 
appuyer mes préconisations auprès des différentes personnes constituant l'équipe d'un 
projet (chef de produit chef de projet directeur artistique.) le suis effectivement 
conduite à argumenter certains choix auprès des équipes marketing ou technique. Mon 
rôle étant de prouver qu'un site web facile à utiliser est une clé de la réussite commerciale 
(message drôlement compliqué à faire passer car pour certains la simplicité équivaut à 
un manque d'attractivité ! Pourquoi faire simple quand on peut faire compliqué...). 


Je fais référence surtout aux chapitres concernant la navigation web et la page web. Les 
Hustrations et les recommandations m'aident à expliquer clairement les conseils que je 
peux donner. 


J'utilise souvent l'index du manuel pour effectuer une recherche rapide et je m'inspire 
volontiers de la check-list pour poser des questions en réunion. Enfin, la synthèse des 
critères ergonomiques (tableau) est un outil indispensable pour ne pas oublier l'utilisateur 
{et pour se familiariser avec les noms barbares des critères !). » 


Aude FRAISSE 
Conceptrice multimédia sur le portail Orangefr 
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« Le monde est complexe tout comme les activités que nous réalisons. Mais nous ne devons pas 
pour autant vivre en constante frustration. Non. Tout l'intérêt de la conception centrée 
utilisateur est d’apprivoiser la complexité, de faire en sorte que ce qui semble être un outil 
compliqué, devienne adapté au besoin, compréhensible, pratique et agréable à utiliser. » 

Don Norman!, Interactions Journal, 2008. 


1.1 Les enjeux de la conception ergonomique 
1.2 Ergonomie du web 
1.3 Ergonomie des intranets 


1.4 Ergonomie tactile et mobile 


1.5 Cas pratique : Dovadis, un logiciel de gestion immobilière intuitif 


1.1 LES ENJEUX DE LA CONCEPTION ERGONOMIQUE 


1.1.1 Du besoin à l'usage 


L'utilisation d’un logiciel, d'un site web ou de toute autre interface informatique 
repose sur des besoins et des atrentes. Qu'il s'agisse de trouver une information sur 
internet, de poser des congés sut un intranet ou d’acheter un billet sur une borne 
interactive, le principe reste le même : l'utilisateur veut atteindre un but. L'interaction 


1. Don Norman est un professeur émérite en sciences cognitives de l'université de Californie. Il est 
le cofondateur, avec Jakob Nielsen, du Nielsen Norman Group. 
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avec l'interface va conditionner l'efficacité avec laquelle il atteint ce but et donc la 
qualité de l’expérience de l'utilisateur. 


L'objectif de l'utilisateur est certes d'aboutir à un résultat bien particulier mais il 
souhaite surtout satisfaire un ensemble d’exigences propres pour y accéder. Plus l’inter- 
face paraît facile à utiliser, plus elle est appréciée des utilisateurs. Et quand il s’agit d'un 
produit « interactif », cela devient un facteur de satisfaction et de confiance envers 
la marque qui en est à l’origine. Pour le grand public, des marques telles que Nokia, 
Apple ou Sony intègrent depuis de nombreuses années la démarche ergonomique dans 
la conception de leurs produits. De cette confiance nait évidemment la popularité 
mais aussi la fidélité des clients. 


Car tout client réel ou potentiel, est d’abord un utilisateur. Concevoir un produit 
répondant aux besoins et aux exigences des utilisateurs permet de partir dans la bonne 
direction. Mais c’est en faisant participer l'utilisateur tout au long de la conception et 
de l'évaluation de l'interface que la démarche ergonomique prend tout son sens. 


1.1.2 Les bénéfices de l'ergonomie 


L'interface occupe une part importante du code développé ; en moyenne 48 %, 
voire 80 % pour les applications web. Par ailleurs, c'est un sujet de préoccupation 
récurrent pour les concepteurs de produits informatiques ; il a été relevé que l'interface 
homme-machine faisait l’objet d'environ un tiers des points abordés lors des réunions 
d'avancement [Nielsen 93]. 


Dans le cadre d’un projet informatique, les méthodes de conception ergonomique 
permettent de réduire les coûts de développement. En effet, en impliquant l'utilisateur 
final dès la phase de conception du logiciel, l'équipe projet peut rapidement consolider 
avec le client sa compréhension du besoin. Sachant qu’en moyenne 70 % à 80 % des 
coûts sont engagés au début du projet, l'enjeu est important. 


Nos clients évoquent généralement, pour des applications SI, des gains d'environ 
30 % obtenus en mettant en œuvre une démarche ergonomique dès la phase de 
spécification. Ce gain correspond directement à une réduction des coûts de mainte- 
nance corrective. En effet, lorsque les utilisateurs sont impliqués dans la phase de 
spécification au démarrage du projet, il y a moins de raisons pour qu'ils demandent 
des modifications par la suite, à plus forte raison lorsque des maquettes ont permis de 
tester la viabilité opérationnelle de l'application. 


Pour les applications informatiques employées en entreprise, l'intérêt est donc 
double. D'une part, la démarche est source d’un gain de productivité pour les 
utilisateurs finaux, car l'interface sera plus rapide à utiliser, plus simple à apprendre et 
minimisera le risque d'erreur. D'autre part, elle permet aux équipes informatiques de 
réduire les coûts de maintenance corrective. 


Bien entendu, la démarche de conception orientée utilisateur a également un coûr. 
Il est évalué à environ 6 % du budget global du projet [Nielsen 93]. Cet investissement 
est relativement faible au regard de l'importance des enjeux que sont la qualité du 
produit et la satisfaction du client. 
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1.1 Les enjeux de la conception ergonomique (:] 


Pour une ligne de produit logiciel, la démarche ergonomique est un vecteur de 
réutilisation. Elle permet de mettre en place un cycle d'améliorations s'appuyant sur 
un ensemble de composants de base dont l'utilisabilité est affinée au fil des versions 
du produit. 


Recueillir 
les retours 
FT d'utilisation \ 
une Na LE Enrichir 
À les règles ign 
du produit gles de desig 


\ / 


Faire évoluer la base 
de composants réutilisables 


Figure 1.1 — La pratique de l'utilisabilité est un vecteur de réutilisation. 


Un document, généralement appelé guide de style, ou charte ergonomique, définit 
les principes ergonomiques suivis par le logiciel ainsi que le design graphique de son 
interface. Ces principes, issus de précédents projets et de considérations ergonomiques 
générales, orientent les spécifications des composants logiciels. Pour chaque projet, 
l'interface homme-machine du système est construite à l'aide de ces composants de 
base. Puis, en fonction des retours d'utilisation, le guide de style est mis à jour, et ainsi 
de suite, 


1.1.3 Quelques réussites commerciales 


Comme la plupart des méthodes visant à améliorer la qualité d’un produit, il est 
diffcile d'estimer précisément le gain apporté par les démarches ergonomiques. 
Cependant, quelques réussites commerciales ont permis de mesurer la répercussion 
de l'approche sur les résultats financiers de l’entreprise [Hendrick 97]. 


L'une des premières entreprises à adopter cette méthode à été Thomson Mulri- 
média. En 1988, le design ergonomique des télécommandes leur offre un véritable 
avantage concurrentiel ; plusieurs millions en ont été vendus. En 1994, le système 
de réglage du décodeur satellite DSS, conçu également en relation étroite avec les 
utilisateurs, a largement dépassé les prévisions de ventes. 


Une amélioration, même minime, de lutilisabilité peut être à l’origine d’une 
économie considérable à l'échelle de l’entreprise lorsque le logiciel est utilisé par de 
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nombreux employés. Ainsi, Ameritech, une compagnie américaine de téléphone, a 
revu les écrans de saisie utilisés par ses assistants de direction, réduisant de 600 ms le 
temps moyen pour traiter un appel. Il en résulte, pour l’ensemble de la compagnie, un 
gain de 2,94 millions de dollars par an. 


En 2008, les responsables du site Breastcancer.org constatent que leurs utilisateurs 
passent au moins 15 minutes pour s'enregistrer, généralement avec beaucoup de 
difficultés car ils reçoivent au moins 15 requêtes de support par semaine. Suite à 
une série de tests utilisateur, ils réduisent de moitié la durée d'enregistrement, et font 
ainsi baisser de 69 % le coût du support. 


Souhaitant améliorer la qualité de sa relation client, Staples, spécialiste américain 
des fournitures de bureau, décide de refondre son site selon une démarche ergonomique 
(enquête utilisateur, audit ergonomique et tests utilisateur). Grâce au nouveau site, il 
augmente de 67 % la fidélité de ses clients. La fréquentation du site augmente de 80 %, 
lui procurant une augmentation de 491 % des revenus au troisième trimestre 2000. 


En 2005, le webmaster du site de l'American Heart Association constate une baisse 
des dons en ligne alors que le nombre de visiteurs entrant dans la section donation 
est important. Il conduit des tests utilisateur, modifie l'agencement des pages er le 
parcours vers le bouton de don en ligne. Les dons augmentent de 60 % suite à cette 
refonte. 


Ces exemples montrent les principaux bénéfices de la démarche ergonomique : 
une meilleure rentabilité et une plus forte attractivité du produit. 


1.2 ERGONOMIE DU WEB 


Un projet web est un projet d'entreprise. Mettre en place un site, communiquer, 
établir une relation commerciale sur le web est un choix stratégique. Au même titre 
que la stratégie de l’entreprise se construit sur le long terme, le fonctionnement du 
site doit être conçu dans la durée. 


1.2.1 Pourquoi faire des sites web faciles à utiliser ? 


Internet est une technologie décentralisée, à la disposition de tous, offrant un 
support à des applications à la fois domestiques : le réseau Internet grand public, 
et professionnelles : le réseau intranet interne à l’entreprise ou extranet regroupant 
un ensemble d'entreprises. 


Pour autant, les applications web! touchent un public large, majoritairement 
novice en informatique. De nombreux problèmes d'utilisabilité résultent de cette 
fracture entre la technologie du web et les utilisateurs visés. 


1. Le terme web est employé dans cet ouvrage pour désigner Internet en général, à la fois grand 
public et professionnel (intranet et extranet). 


1.2 Ergonomie du web (s] 


1.2.2 L'internaute est généralement le client 


Sur Internet où le client peut changer de boutique d’un simple clic, l'ergonomie a un 
impact direct sur la rentabilité du site. Alors que Le web est peuplé de sites proposant 
des services similaires, l'internaute préférera choisir Le site le plus simple. Ainsi en 
1998, C. Moore (IBM Internet Operations Manager) dresse un tableau catastrophique 
du site IBM : « La fonction la plus populaire est le bouton de recherche, parce que personne 
n'arrive à naviguer (...) la seconde fonction la plus populaire est le bouton d'aide, parce que 
la fonction de recherche n'est pas opérationnelle »… IBM décide donc de revoir le design 
de ses sites s'appuyant sur des principes ergonomiques simples tels que l'homogénéité 
de présentation et l'accès rapide aux pages les plus fréquemment utilisées. 


Le résultat est immédiat. En mars 1999, dans le mois qui suit le redémarrage, le 
trafic augmente de 120 % sur le site de commerce électronique ShoplBM tandis que 
les ventes grimpent de 400 % ! [Battey 99]. 


1.2.3 Concevoir un site web pour ses utilisateurs 


Un site ne peut pas être conçu comme une plaquette commerciale, c'est-à-dire « une 
fois pour toutes ». Les internautes attendent une information actualisée, mise à jour 
régulièrement. 


Définir le processus de fonctionnement du site. 


Le processus de fonctionnement du site doit être mis en place dès la phase de 
définition. Dans les grandes lignes, le principe consiste à partir du plan du site et à 
identifier pour chaque rubrique les responsables éditoriaux ainsi que la périodicité de 
mise à jour. Îl est d'ailleurs recommandé d'impliquer les responsables éditoriaux des 
différentes rubriques dans la phase de conception du site. 


Connaître son public et inciter au dialogue. 


Un site web s'adresse toujours à un public, au même titre que les informations qu'il 
propose, les produits et les services qu'il présente. De ce fait, connaître ses utilisateurs 
est la meilleure façon de savoir si le contenu du site répond à leur besoin. 


Inciter les visiteurs à partager leur impression sur Le site et son contenu, permet de 
mieux connaître ce qu’ils aiment ou n'aiment pas, les problèmes qu'ils rencontrent, et 
ce qu'ils attendent du site. Ces remarques échangées avec le responsable éditorial ou 
dans le cadre de réseaux sociaux, vont servir à améliorer le site, voire à concevoir les 
prochaines versions. 


Répondre aux utilisateurs. 


Le dialogue doit s'établir dans Les deux sens. Les réponses montrent aux utilisateurs 
que leur point de vue est pris en considération. Ce comportement est généralement 
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apprécié. [Il permet d'établir un climat constructif d'échanges et de confiance qui 
incitera l'internaute à renouveler l'expérience. 


Il est également envisageable de mener des enquêtes de satisfaction en ligne. 
Cependant, ce type d'enquête permet uniquement de récolter les opinions d’inter- 
nautes utilisateurs du site. Elle va servir à identifier des axes de fidélisation, mais elle 
ne permet pas de toucher ceux qui ne vont pas sur site ou qui utilisent d’autres médias. 


Suivre les statistiques d'utilisation. 


Les statistiques d'utilisation permettent d'établir la topologie de fréquentation du 
site. Ces données réelles vont servir à valider les hypothèses faites lors de la phase 
de conception en termes de navigation et de typologie de contenu. Elles permettent 
d'ajuster l’organisation du site afin que les pages Les plus fréquemment utilisées soient 
les plus faciles à atteindre. Les statistiques fournissent également une mesure réelle 
de la configuration matérielle des visiteurs (navigateur, résolution graphique, taille 
d'écran, système d'exploitation) et permettent d'adapter le sire aux supports utilisés 
(écrans d'ordinateur, smartphone, tablette PC). 


Prévoir les cas d'erreur. 


Cre À À preper da Smmong | Myfameung À Encagaraz vote produri Rethert dhret 


: ans My 
tfosmiauique Étect srmertaget 


AGP 


Page Introuvable 


ct 


La page que vous demandez est introuvable 


Désoié, di ei possible que 19 page tacherchés ài oté cUppnnbe, QUE Son nom M éhangé ou qu'elle ne Sn DES Ur DOriDIS BOUT 
le more 


Petarnnes à ke pe pteceibrate y 


> Dunod. 


s: 


20 


D. 


ght © 


Copyri 


TV Audio ! Vidéo Photo Canésrepe LOCIICE TT 13 Électiousérme 
UE 12040 102$ Sante WE210 MP900X 34 RSAIDIPE 
UE 3204070 CAM ZT ECO TEPOE | NPIOON LA AO FR RSAIDIPE EF 


toutes TY Austin / Vito 


tewenore 

ects OVD : Pause 
0vo 
Home Cavèsre DVD 
cafe Carèrhé Élus + y 
mare dde Son 
Moro Chana 
L 2 


1n865 Phto Caméscope 


Appart er phctO 
Care sropes 


Cadres prato 


Lead 98 tr mue 


Ordnatous 3 portaoies 
Bécr dus à 

cho ps Op Heut 6 
Saduteots dr'emps e:sran 
Datquert da + 
COTE 07 
Cartes mére 


Livres éectionamts 


Figure 1.2 — Cette page d'erreur conduit l'utilisateur sur une page présentant l'organisation du 
contenu du site lui permettant de retrouver rapidement l'information qu'il cherchait. 
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1.3 Ergonomie des intranets [7] 


Suite à une réorganisation du site ou à une saisie erronée de l'adresse de la page, 
il est possible de renvoyer l’utilisateur vers une page prédéfinie lorsqu'il rencontre un 
lien brisé (i.e. page 404). Dans ce cas, plutôt qu'un message d'erreur, il est préférable 
d'aider l'utilisateur en l’orientant vers la page d'accueil ou en lui proposant de trouver 
ce qu’il cherche à l’aide des grandes rubriques détaillées du site et du moteur de 
recherche. 


Mettre à jour régulièrement le site, maintenir les liens externes. 


Aussi utile soit-il, un site, s’il ne change pas, n’est plus visité. D'ailleurs, connaissant 
par avance son contenu, pourquoi le visiterait-on ? Il est important d'actualiser 
régulièrement les informations du site. Les nouveautés doivent apparaître clairement, 
si possible dès la page d'accueil, afin que le visiteur régulier puisse en être informé 
immédiatement. De même, il est préférable de vérifier régulièrement le bon fonction- 
nement des liens vers les autres sites. Un lien « mort » dénote un certain laisser-aller 
dans la gestion du site. 


1.3 ERGONOMIE DES INTRANETS 


Dans les grandes lignes, la conception d’un intranet ne diffère pas de celle d'un site 
internet. Les règles à suivre sont les mêmes. Cependant les enjeux sont différents. La 
plupart des sites internet ont une vocation marchande. Ils permettent à l'entreprise 
d'établir une relation commerciale avec ses clients. Au contraire, les utilisateurs de 
l'intranet sont les propres salariés de l’entreprise. 


lci l'objectif est non seulement un gain en termes de productivité financière, mais 
aussi sur le plan collectif par la communication et le partage des connaissances. 


L'audience est souvent diversifiée. Un intranet s'adresse à tous les profils de salariés, 
qu'ils soient à l’aise ou non avec l'informatique. Il est donc indispensable au moment 
de la conception d'un intranet de pouvoir s'appuyer sur panel relativement large 
d'utilisateurs représentatifs. 


Sur l'intranet, le design doit avant tout être fonctionnel. C’est le contenu qui 
prime. La qualité de l'information et avec rapidité à laquelle on y accède sont les 
principaux critères d’utilisabilité de l'intranet. 


Le graphisme ne doit pas pour autant être négligé lors de la conception d'un 
intranet, car il joue un rôle déterminant dans la mise en valeur des informations. Un 
intranet au look soigné montre aux intranautes que ce site leur est dédié, et qu'ils ne 
sont pas négligés. L'agencement de la page, les choix de typographie et de couleur 
sont également des éléments qui permettent à l'utilisateur d'accéder rapidement à 
l'information qu'il cherche. 
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Figure 1.3 — Pour les intranautes, le contenu importe plus que le graphisme, comme le montre 
la page ci-dessus qui est la plus consultée de l'intranet de cette entreprise. 


Les enjeux de l'intranet 


L’intranet est un outil de travail collectif, partagé et conçu par tous les salariés de 
l'entreprise. À la base, c’est un média d'échange et de partage. Il permet de mettre en 
commun des informations avec les autres collaborateurs de l’entreprise : documents, 
modèles, connaissances, savoir-faire, informations pratiques, etc. 


Les salariés se servent de l'intranet au quotidien pour y trouver les informations 
nécessaires à leur travail [Germain C4]. En effet, contrairement au web où l’internaute 
peut quitter un site qui lui semble crop complexe, les intranautes n'ont pas d’autre 
choix que de rester sur leur intranet. Imaginons, par exemple, qu’un salarié utilise en 
moyenne l'intranet 3 fois par semaine à raison de 20 minutes chaque jour. Un simple 
gain de 2 minutes par jour permet de gagner 6 minutes par semaine et par employé. En 
considérant que le coût moyen d'un salarié est de 60 000 euros, pour une entreprise 
de 1 000 personnes, le gain total sera 160 000 euros par an. 


Cependant, certaines entreprises continuent à concevoir l'intranet sans prendre 
en compte son utilisation effective par les salariés. Ainsi, sur l'intranet d'une société 
française, se trouvait un formulaire appelé « Demande de Matériel Informatique » 
qui devait être utilisé, comme son nom l'indique, pour toute requête d'évolution du 
parc informatique. La navigation sur le site n'étant pas aisée, les employés mettaient 
en moyenne 15 minutes pour retrouver ce formulaire. Or, dans cette entreprise de 
4 000 personnes, 550 formulaires de ce type étaient remplis chaque mois, soit une 
perte de 100 000 euros environ par an ! Le plus marquant ici n’est pas tant le préjudice 
financier, mais plutôt le gaspillage de temps généré et le stress qui en découle. 


À l'inverse, Bay Networks, une société informatique travaillant dans le domaine 
des réseaux, a dépensé 3 millions de dollars pendant 2 ans pour étudier la façon 
dont ses employés se servent de la base de données intranet. À partir de cette étude, 
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1.3 Ergonomie des intranets ls] 


l'organisation de l'intranet a été revue, faisant économiser 10 millions de dollars par 
an à l’entreprise [Fabris 99]. 


1.3.2 La navigation : principale difficulté des intranets 


« Notre intranet : ilest bien, c'est une formidable source d'informations. Mais on ne sait pas 
toujours les retrouver. » Voici une remarque qui revient souvent lorsque les salariés 
parlent de leur intranet. 


En effet, contrairement à l'internet où l'utilisateur recherche une information 
précise, le salarié utilise l'intranet pour y trouver une quantité plus importante de 
données : celles nécessaires à son travail. Les intranets sont donc généralement plus 
volumineux que les sites internet. En moyenne, le site intranet contient environ 50 à 
100 fois plus de pages que son homologue Internet. 


Faciliter la navigation et la recherche d'informations. 


Les intranets sont volumineux. De ce fait, la navigation y est difficile. Permettre à 


l’intranaute de naviguer facilement doit être l'objectif premier des concepteurs du site. 
L'ergonomie du système de navigation sera traitée en détail dans un prochain chapitre. 


Calquer la structure du site sur l’organisation de l’entreprise. 


Afin de permettre aux salariés de se repérer facilement, il est conseillé de structurer 
le contenu de l'intranet en s'appuyant sur l’organisation interne de l’entreprise. Les 
salariés connaissent leur entreprise. Ils savent qui fait quoi et où ils sont susceptibles 
de trouver l'information. Ils s'orienteront plus rapidement dans l'intranet s’il reprend 
l'organisation de l’entreprise. Pour les nouveaux venus (e.g. récents embauchés ou 
prestataires), d’autres moyens doivent être offerts pour leur permettre de retrouver les 
informations : moteur de recherche, index thématique. 


Dans le même ordre d'idée, il est conseillé de créer des mini-sites dédiés aux 
projets de l’entreprise. Les différents participants y trouveront les documents et les 
informations relatifs au projet. Ils partageront et communiqueront leurs résultats au 
reste de l’entreprise au travers de ces sites. 


Définir un modèle de page unique pour l’ensemble de l'intranet. 


Afin de permettre à l'utilisateur de se repérer facilement entre les rubriques, la 
conception de l'intranet doit s'appuyer sur un système de navigation unique et un 
schéma de page commun à l'ensemble du site. De cette manière, l'intranaute retrouve 
des repères visuels fixes sur chacune des pages de l'intranet. 


Une organisation cohérente du site permet à l'internaute de retrouver une 
disposition similaire d’une page à l’autre. Il a ainsi le sentiment de rester « au même 
endroit ». La prise en main est plus facile. 
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Figure 1.4 — La structure de cet intranet, telle qu'elle apparaît sur la page d'accueil (dont une 
partie a volontairement été masquée), reprend l'organisation de l'entreprise en Lignes de produits 
(Business Lines) et Directions. On trouve également une rubrique dédiée à chaque site régional, 
l'entreprise étant répartie sur toute la France. À noter les rubriques de la colonne de droite : 

« Connaissances » destinées au partage des savoirs et « Les outils » qui donnent un accès direct 
aux applications informatiques disponibles sur l'intranet. 


1.4 ERGONOMIE TACTILE ET MOBILE 


1.4.1 


Depuis quelques années, les interactions tactiles se sont multipliées dans notre quo- 
tidien, offrant de nouvelles opportunités d'accès et de manipulation de l'information : 
borne interactive, smartphone, baladeur MP3, tablette, appareils électroménagers, etc. 
Principalement utilisés sur les appareils nomades, les écrans tactiles stimulent nos 
exigences en manière d’interactivité et de facilité d'utilisation. 


Concevoir pour de petits écrans 


Les écrans tactiles sont souvent de petites tailles, certes en raison de leur coût, mais 
surtout du fait de l'usage qui leur est destiné : le smartphone propose de multiples 
applications mais doit rester un téléphone et pouvoir se glisser dans une poche. 
Les tablettes offrent davantage d'espace aux contenus, favorisant le confort de la 
consultation et des moments d’interactivité plus longs. 


La conception d’une interface tactile est contraignante car l’espace est plus 
restreint pour présenter du contenu et le valoriser graphiquement. Toutefois, cette 
contrainte de place est compensée par des contenus systématiquement interactifs : le 
pointage au doigt permet d'afficher des informations plus riches à partir par exemple 
d'un simple titre, d'une photo ou du résumé d’un article. Les liens entre les contenus 


1.4 Ergonomie tactile et mobile in] 


se matérialisent par des zones cliquables et non plus par des liens soulignés comme sur 
le web. 


Le principal attrait du tactile réside dans le fait qu’il n’y a pas d’intermédiaire 
physique entre l'interface, son contenu et l'outil de sélection. Ici l'utilisateur agit 
directement sur l'interface, il ne doit pas se servir d’une souris pour utiliser l’application. 
IF peut agir directement avec ses doigts, certes plus volumineux que le pointeur d'une 
souris. L'interface tactile présente une véritable « manipulation directe ». 


Bien sûr, la modalité tactile introduit également une autre manière d’interagir avec 
les informations affichées. Tout contenu est en soi manipulable indépendamment des 
autres contenus composant l'interface, de sorte qu'une photo ou une vidéo peuvent 
s’agrandir sur tout l'écran en tapant deux fois dessus ou en l'étirant avec deux doigts 
(cf. les gestes au chapitre 3). 


La dimension de l'écran introduit également des différences dans l'agencement 
du contenu informationnel par rapport à un écran classique d'ordinateur. Pour un 
smartphone par exemple, les informations sont avant tout présentées en une même 
colonne pour faciliter la lecture et la sélection au doigt, quelle que soit l'orientation 
de l'écran. La navigation dans les écrans est immanquablement verticale, obligeant 
l'utilisateur à faire défiler le contenu. Avec un écran plus grand, la lisibilité de 
l'information reste primordiale mais l'espace disponible permet d’agencer le contenu 
avec plus de liberté. Le nombre de colonnes peut varier facilement, y compris en 
reprenant des mises en forme et des dispositions déjà connues des utilisateurs sur 
d'autres supports. Les journaux et magazines en ligne reprennent souvent d'ailleurs 
des mises en page qui ont fait leur preuve en version papier. 
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Figure 1.5 — Sur tablette, l'information est présentée en reprenant les principes d'agencement 
de la version papier, l'interactivité tactile en plus. 
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1.4.2 L'interactivité au bout des doigts 


Les interfaces interactives n'ont pas seulement investi le champ de la mobilité, elles 
ont également permis de simplifier leur usage en proposant une relation plus directe 
avec l'utilisateur : l'interaction tactile. 


Les premières interfaces mobiles étaient contraintes par l’utilisation d’un curseur se 
déplaçant d'objet en objet ou avec les rouches du clavier numérique. Toute interaction 
passait nécessairement par un intermédiaire supplémentaire entre l'utilisateur et 
l'interface. 


L'avènement de la modalité tactile a bouleversé la relation avec l'appareil interactif 
et son contenu. L'utilisateur ne se contente pas de consulter un écran, il le manipule, 
tout comme les informations qui y sont affichées. Les écrans successifs peuvent se 
feuilleter comme les pages d'un livre, le déplacement d’un objet virtuel s'effectue 
directement avec le doigt comme on le ferait avec un objet réel. 
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Figure 1.6 — Contrairement à une version WAP, un site ou une application web pour 
smartphone tactile propose une information moins dense en privilégiant la qualité graphique et 
l'interactivité des contenus. 


L'interaction tactile implique toutefois d’autres règles. Le doigt, ce pointeur 
surdimensionné, n’est pas aussi précis qu'un pointeur de souris ou même l'indispensable 
stylet des premiers PDA. Toute information est inévitablement cachée au moment où 
le doigt la sélectionne. Ceci implique alors que tout objet graphique et cliquable doit 


1.5 Cas pratique : Dovadis, un logiciel de gestion immobilière intuitif "| 


non seulement être de dimension suffisante pour faciliter sa sélection mais également 
renvoyer à l'utilisateur une confirmation explicite (un feedback) de son action sur 
l'interface (e.g. vibration à l'appui, agrandissement de la zone cliquée au-dessus du 
bout du doigt). Les espacements sont tout autant nécessaires pour le confort du 
pointage afin d'éviter un appui sur un objet différent de la cible digitale initiale. On 
constate d'ailleurs davantage d’erreurs d'utilisation en tactile qu'avec la souris. 


Figure 1.7 — Le test utilisateur permet d'observer directement les réactions de l'utilisateur 
et de les enregistrer à des fins d'analyses 
{ici test d'une application tactile sur tablette). 


1.5 CAS PRATIQUE : DOVADIS, UN LOGICIEL DE 
GESTION IMMOBILIÈRE INTUITIF 


1.5.1 La gestion immobilière : une activité variée et diverse 


La gestion immobilière est un domaine complexe faisant appel à des compétences à la 
fois comptables, légales, juridiques et commerciales. 


L'administrateur de biens doit savoir gérer les copropriétés et les locations donc il a 
la charge, cout en restant disponible aux demandes de ses clients. Il est fréquemment 
interrompu dans ses activités : appels téléphoniques, visites etc. 


IL est donc essentiel qu’il puisse s'appuyer sur un outil convivial pour le guider dans 
son activité quotidienne. 


Qui plus est, le turnover est généralement fréquent au sein des agences, le logiciel 
de gestion doit donc pouvoir être pris en main rapidement afin que les nouveaux 
salariés soient immédiatement opérationnels. 
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1.5.2 Une première version peu intuitive 
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Une première version du logiciel Dovadis avait été réalisée en 2009. L'ensemble 
des fonctionnalités proposées répondaient aux besoins des utilisateurs finaux : pré- 
lèvements automatiques, gestion des APL, bibliothèque de documents prédéfinis, 
regroupements et éclatements des mandats, etc. Cependant dans le cadre d’un 
alpha-test, l'interface s'est avérée peu intuitive et visuellement trop chargée. Bien 
que fonctionnellement performant, le logiciel était mal perçu par les utilisateurs. Ce 
handicap était un frein important au lancement commercial du produit. 


Figure 1.8 — La première version de l'interface du logiciel Dovadis 


Le manque de guidage, des libellés peu explicites et un graphisme aux couleurs 
trop vives donnent à cette première version l’image d’un logiciel complexe. 


C'est pourquoi, Log'inspace a décidé de refondre l'interface de son application en 
s'appuyant sur des bases ergonomiques solides. 


1.5.3 Des groupes de travail regroupant les différents métiers 


Afin de pouvoir intégrer à la fois les contraintes du métier de la gestion immobilière 
et les contraintes techniques du produit, puisqu'il s’agit ici d’une refonte ne modifiant 
que la couche IHM du logiciel tout en conservant les mêmes fonctionnalités, nous 
avons conduit des ateliers de conception avec une équipe mixte composée des 
commerciaux, en relation avec les agents immobiliers, et des responsables de l'équipe 
de développement. 
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1.5 Cas pratique : Dovadis, un logiciel de gestion immobilière intuitif 


Figure 1.9 — Maquette papier de l'interface réalisée lors des premiers groupes de travail 


Dans un premier temps, le groupe de travail a élaboré des maquettes « papier » à 
l’aide de post-it pour figurer les zones dynamiques de l'écran. Cette technique, appelée 
aussi « paper prototyping », permet d'avancer rapidement et de manière conviviale. 


S'appuyant sur la maquette papier, nous avons ensuite construit une maquette « fil 
de fer » interactive de l'interface. Ce type de maquette permet de montrer concrè- 
tement comment sera utilisé le logiciel dans le cadre de différents scénarios métiers 
typiques. L'équipe produit a pu ainsi valider dans un contexte réaliste l'interface qui 
sera ensuite proposée aux utilisateurs. 


Dans le cadre d’une refonte comme celle-ci, l'intérêt de la démarche ergonomique 
est de pouvoir valider la conception des écrans, à la fois sur le plan du métier et sur le 
plan technique, rapidement, et sans qu'aucun développement n'ait été initié. 
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Figure 1.10 — Maquette fil de fer interactive montrée à l'équipe produit 


1.5.4 Un design épuré privilégiant le contenu métier 


À l'issue de la phase de maquetrage, l'équipe produit Log'inspace a défini l'agencement 
et le contenu des principaux écrans de la nouvelle application. Le design graphique 
s’est attaché à combiner la lisibilité de l'interface, la simplicité, tout en mettant en 
exergue les éléments de guidage qui vont faciliter l'apprentissage et rassurer l’utilisateur. 
Les utilisateurs travaillant plusieurs heures par jour sur le logiciel, il convenait de 
réaliser un style graphique qui minimise la fatigue visuelle. 


L'ensemble est clair et léger, l'interface est épurée privilégiant Le contenu informatif, 
plutôc que les artifices graphiques. 
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Figure 1.11 — Design graphique de l'interface finale 


1.5.5 L'ergonomie jugée plus importante que les fonctionnalités 


Le logiciel a été installé dans les premières agences en 2010. L'ergonomie a été 
immédiatement appréciée et adoptée par les utilisateurs. Elle est d’ailleurs jugée plus 
importante que les fonctionnalités, par certains clients, car elle leur permet de réduire 
le temps passé sur les activités administratives au profit d’une meilleure relation avec 
la clientèle. Dans le cadre d'une phase de bêta-test, il a pu être validé que les temps 
de formations pouvaient être réduits de 30 % du fait de l'efficacité de l'ergonomie de 
l'interface. 


« Nous avions une double contrainte : satisfaire des petits clients et des clients tels que 
des groupes immobiliers, aux attentes très différentes, avec un produit unique. 


La démarche ergonomique nous a permis de prendre conscience de l'importance de 
réunir les commerciaux, les développeurs les formateurs, les hotliners autour d'une 
même table pour mieux prendre en compte les habitudes de nos clients. Lors de ces 
réunions, l'ergonome nous a permis d'avancer à la fois sur la présentation et la clarté 
de nos écrans mais aussi sur les scénarios de navigation et l'intuitivité. Des pistes nous 
ont été proposées et expliquées nous avons intégré de nouveaux réflexes dans notre 
approche du développement et nous sommes partis sur de nouvelles bases avec des 
méthodes de travail plus efficaces. 


Chapitre 1. Concevoir des interfaces ergonomiques 


Nous sommes particulièrement satisfaits de cette démarche, combinant ergonomie et 
design, et qui aura un impact significatif sur nos ventes. » 


Pascal GIVON 
Directeur Log'inspace 
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« La façon dont les fonctionnalités sont organisées détermine quand et où seront présentées les 
informations et les fonctions dont l'utilisateur a besoin. Cette organisation est Le point déterminant 
de l'utilisabilité d'un système interactif. Elle devrait refléter la séquence d'étapes la plus efficiente 

pour que l'utilisateur puisse accomplir ses objectifs les plus attendus ou les plus fréquents. » 
Deborah J. Mayhew!, Principles and guidelines in software user interface design, 
Prentice-Hall, 1992 


2.3 Agencer pour interagir 


2.4 Concevoir la page d'accueil 


2.5 Cas pratique : K-d'école, comment le maquettage permet de répondre à des enjeux 
fonctionnels et métiers complexes 


IDENTIFIER LE CONTENU 


La conception « centrée utilisateur » d'une application logicielle ou d’un site web 
consiste à élaborer son contenu en s'appuyant sur les fonctions et les services que 
recherchent les utilisateurs. La première étape permet de préciser les caractéristiques de 
la population visée ainsi que les moyens dont elle dispose pour atteindre ses objectifs. 


1. Deborah J. Mayhew est consultante, auteur et professeur en Usability Fngineering depuis 1981. 


Elle est reconnue en tant que pionnière pour Les tests utilisateurs web et logiciel, ainsi que dans Le 
design d’interfaces utilisateur. 


2.1.1 


Chapitre 2. Organiser l'information 


Ensuite, des interviews nous aident à mieux comprendre l'attente des utilisateurs 
et les questions qu'ils se posent. Ces éléments servent à construire l’architecture de 
l'information qui servira de plan directeur à l’organisation du contenu de l’application. 


Cibler les attentes des utilisateurs 


Afin de pouvoir adapter l'interface aux utilisateurs et au contexte d'utilisation, il 
convient dans un premier temps d'identifier précisément le profil de la population 
visée : tranche d'âge, catégorie socio-professionnelle, expérience de l'informatique 
et/ou de l'internet, conditions environnementales ainsi que la configuration du 
matériel utilisé (type d'interface, système d'exploitation, navigateur le cas échéant, 
résolution d'écran, etc). 


Avec le concours d’un échantillon d'utilisateurs appartenant au cœur de cible, 
on précise les services et les tâches proposés par le produit. Cette première étape 
de la conception fait généralement l’objet d'une enquête par interview individuelle 
ou par groupe de travail (focus group) . On recueille ainsi l’attente et le besoin 
des utilisateurs : Quels problèmes vont-ils chercher à résoudre ? Qu’attendent-ils de 
l'application ou du site web ? Dans quel contexte sont-ils amenés à l'utiliser ou y aller ? 
Quelles sont, d’après eux, Les lacunes des applications ou sites existants du même type, 
voire des autres médias offrant ce type de service ? 


Ces éléments fournissent des éléments subjectifs sur l’attente des utilisateurs. Les 
interviews permettent de mieux comprendre l’image que se font les utilisateurs du 
service proposé et ce qu’ils en attendent. Les focus group servent à identifier l'univers 
symbolique de l'utilisateur. Tirant parti de la dynamique du groupe, ils permettent de 
consolider la ligne de communication de l’entreprise au travers de son produit. 


IL est à noter que ces méthodes (interviews et focus group} vont servir uniquement 
à recueillir les souhaits de l'utilisateur. En aucune manière, elles ne peuvent permettre 
de prévoir son comportement avec le produit [Nielsen O1]. On recueille de cette 
façon des informations subjectives. Elles pourront être remises en cause par la suite 
lorsque l'utilisateur est placé en situation d'utilisation. En effet, les tests nous montrent 
que lutilisateur ne fait pas toujours ce qu’il a annoncé, car la situation concrète 
induit de nouveaux comportements. Or, l’utilisabilicé d'un produit s'appuie sur ce 
que l’utilisateur fait effectivement et non sur ce qu’il pensait faire. C’est pourquoi, on 
accordera plus d'importance à un problème qui a été rencontré lors d’un test qu’à celui 
dont le risque aurait été évoqué lors d'une interview. 


2.1.2 Transmettre l'information 


Pour un site web ou un intranet, le ciblage consiste également à identifier en fonction 
de la population visée, les objectifs de communication que cherche à atteindre 
l’entreprise au travers de son site. Une ligne de communication précise les messages à 
transmettre, les éléments persuasifs du message ainsi que la manière dont les textes et 
le graphisme du site vont transcrire ces messages. 


2.1 Identifier le content. 21] 


En phase de définition, il est également particulièrement utile d'établir le paysage 
concurrentiel dans lequel le site se positionne, c’est-à-dire identifier les concurrents, le 
contenu qu'ils proposent et la façon dont ils communiquent sur différents médias. 
Une analyse détaillée (benchmark} en termes de design, de communication et 
d’utilisabilité va servir à identifier les points forts et les points faibles des sites 
concurrents. L'objectif est bien entendu que le nouveau site remédie aux problèmes 
rencontrés par les internautes tout en conservant les aspects positifs des sites existants. 


Selon les moyens mis en œuvre pour cette phase, des tests d’utilisabilité peuvent 
être mis en œuvre sur les sites concurrents ou, à un moindre coût, une simple 
inspection ergonomique sur les points suivants. 


Check-list d'évaluation rapide 

L'objectif du site est-il clair ? 

L'audience du site peut-elle clairement s'identifier ? 

Le site estl utile et pertinent pour ce public ? 

Le site est-il intéressant et attirant ? 

Le site permet-il aux visiteurs de réaliser toutes les tâches qu'ils veulent accomplir ? 
Les visiteurs peuvent-ils accomplir facilement ces tâches ? 

Le contenu et l'organisation des informations sont-ils cohérents avec l'objectif du site ? 
L'information importante est-elle facile à trouver ? 

Toutes les informations sont-elles claires, faciles à comprendre et à lire ? 

Le visiteur sait-il toujours où il est et comment faire pour aller où il veut ? 

Le graphisme est-il agréable ? 

Les pages se chargent-elles suffisamment vite ? 


C4 
v 
La 
Ca 
# 
La 
La 
Ca 
# 
Ca 
C4 
La 


Ces différentes analyses vont permettre de définir les éléments distinctifs du 
site pour qu'il soit réellement compétitif. Elles débouchent sur l'élaboration de 
l'architecture de communication. 
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2.1.3 Architecture de communication 


Construire l'architecture de communication d’une application consiste dans un 
premier temps à identifier les besoins et Les questions que se pose lutilisateur. IL s’agit 
alors de construire les réponses, c’est-à-dire les services rendus par l'application, en 
s’assurant que des objectifs de communication sont atteints. 


Une interface fonctionne lorsqu'elle fournit des réponses à ses utilisateurs ec qu'elle 
transcrit les objectifs de communication de ses concepteurs. 


Considérons, par exemple, un site intranet dont l’un des objectifs en termes 
de communication interne est de renforcer l'esprit collectif au sein de l'entreprise. 
L'enquête a recueilli des besoins du type « Comment se faire rembourser une note 
de frais ? » ou encore « Quel modèle de document utiliser pour les fax ? ». Le site y 
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répondra par un ensemble de pages décrivant le référentiel des procédures et des 
documents en vigueur dans l'entreprise. La rubrique «Référentiel» prend en 
compte à la fois le besoin des salariés et l'objectif de renforcer l'esprit collectif puisque 
tous utiliseront les mêmes méthodes et modèles de documents. 


Questions Objectifs de 
communication 
Site 


Réponses Services 


Utilisateur 


Figure 2.1 — Pour être efficace, le site web doit répondre aux questions de l'utilisateur 
tout en véhiculant les objectifs de communication de ses concepteurs. 


Sur ce principe, l'architecture de communication est un document qui synchétise 
cette première phase de la conception de l'application en décrivant les différents 
thèmes abordés et en précisant pour chacun d'entre eux la cible visée et l'objectif 
poursuivi en termes de communication. Il permet de recenser de façon exhaustive 
les différents éléments d’information à partir desquels seront construits les écrans, les 
fenêtres de l’application ou les pages du site. 


2.2 ARCHITECTURE DE L'INFORMATION 


L'architecture de l'information désigne cette étape de la conception où le contenu 
de l'interface est structuré et hiérarchisé en différents groupes d’information qui 
deviendront ensuite des fenêtres ou des pages selon le support. Dans un premier temps, 
le contenu à été élaboré et collecté « à plat ». L'objectif de cette seconde phase est de 
regrouper les informations afin de faciliter la navigation. 


L'architecture de l'information se construit principalement selon deux stratégies 
complémentaires : organisation selon l'usage (la tâche) et organisation selon la nature 
des informations (le contenu). 


2.2.1 Organiser selon la tâche 


Afin de minimiser l'effort d'apprentissage, la logique d'utilisation du logiciel doit 
correspondre à la logique de l'utilisateur. Les informations doivent être présentées de 
manière directement exploitable pour l'utilisateur et organisées en fonction de ses 
attentes. 


À un niveau global, le découpage en pages s'appuie sur l'analyse de l'activité 
de l’usager. Le contenu de chaque page se définit en identifiant les informations 
nécessaires à l’utilisateur pour mener l’activité à laquelle est dédiée cette page. 


2.2 Architecture de l'information #3] 


Organiser l'interface selon la tâche des utilisateurs. 


Le modèle de la tâche fournit l'architecture de base de l'interface. Généralement 
construit à l'issue de l'observation des utilisateurs finaux en situation réelle, ou bien 
élaboré à partir du cahier des charges fonctionnel de l'application, le modèle de la 
tâche représente la manière dont l'utilisateur décompose son activité en tâches et 
sous-tâches. Afin que l'interaction soit fluide et semble logique pour l’utilisateur, cette 
décomposition doit se retrouver dans l'interface. 


Considérons, par exemple, un logiciel de gestion de magasin. 


Gérer le 
magasin 
Établir le bilan Vérifier les Contrôler les 
des ventes commandes stocks 
Éditer le Imprimer le Éditer le Imprirner le Éditer l'état Imprimer 
bilan des bilan des dossier des dossier des des stocks l'état des 
ventes ventes commandes commandes stocks 


Figure 2.2 — Nous supposons, pour cet exemple, que la tâche de gestion 
du magasin se décompose en trois sous-tâches : établir le bilan des ventes, 
vérifier les commandes et contrôler les stocks. 


Chaque page de l'application (voir figure suivante) permet de traiter l’une des 
trois sous-tâches identifiées, à la fois en rermes de contenu (données) et d'actions 
(commandes). 


Construire le contenu de chaque écran de manière à apporter l'information nécessaire 
pour réaliser la tâche correspondante. 


Chaque fenêtre ou page de l'application doit permettre à l'utilisateur de réaliser une 
tâche donnée. Il convient donc d'y placer les informations nécessaires pour réaliser 
cette tâche. 


Dédier chaque zone de l'interface à une tâche spécifique. 


Afin que l'utilisateur puisse calquer sa façon de se servir de l’interface sur la manière 
dont il réalise habituellement la tâche, il doit pouvoir retrouver à chaque niveau les 
différentes étapes qui composent son activité. Chaque zone de l'interface doit donc 
répondre à un sous-objectif de l'objectif général auquel est dédié l'écran. 
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| Gestion 


Ventes Commandes Stocks 


Bilan des ventes 


Jan-2011 Fev-2011 Mar-2011 Avr-2011 

Pulls 1856 2051 1426 1256 

Chemises 1532 2045 1985 2045 

Chaussettes 3232 3365 3654 3562 

Vestes 525 662 525 498 
Imprimer Envoyer 


Figure 2.3 — Chaque ongjlet de l'application est dédié à une sous-tâche. 
Ils présentent les données qui vont permettre à l'utilisateur de prendre une décision et de réaliser 
les actions en conséquence. 


capitaine train & Q Recherche 


Quel est votre trajet ? 


Départ Pons 
Amvée  Monipeiher StRoch 
Aller vendredi 22 Julet à 18n 
Retqur 
Passagers (9) Vaièry 


Rechercher 


pue note 


Aller simple : Paris + Montpellier Si-Roch 


| le moïrs cher | échangeable | pro Atcher Du4 les ‘Estate mème Ldtes) 
vendre 22 quitet 2 classe {4e classe 
Trajet 
17h20 + 20h45 77,00 € 108.00 € 17h20 Pans Gare. yon 
me, Ver + 
Choisir 20h45 Montpellier StAoch enr 
16n20 + 21148 77.00 € 108.00 € Passagers 
710€ Vaéry 
Cane 12-26 : Détersr une Carte 12-25, Échange e1 
19n20 + 2n38 77.00 € 106.00 € remOOURSEMEN Gras jusqu'à là ee Au dépan. 3 € le jour du 
part 


Figure 2.4 — Cette page du site est dédiée à une tâche précise : le choix du billet. Elle permet à 
l'internaute d'atteindre son objectif en deux étapes : rechercher puis sélectionner le billet 


3 Dunod. 


20 


yright 


Cop 


2.2 Architecture de l'information | 


Hiérarchiser les zones de l'interface du général au particulier. 


Une organisation du général au particulier facilite la compréhension de l'interface, 
car les éléments se placent naturellement dans leur contexte. 


Ce principe d'organisation se retrouve dans l’'Explorateur Windows. L'arborescence 
de fichiers, présentée dans la partie gauche de l'Explorateur, fournit une vue globale 
sur les données et indique le chemin parcouru pour atteindre Le répertoire sélectionné. 
La partie droite présente le contenu du répertoire, tandis qu'en dessous s'affiche une 
description détaillée de l’objet sélectionné. 


[sex 
Go) » Bibhothèques » Images + images publiques » Échantillons d'images [+ CR ’ ver D 
Organuser + Æl Aperçu + Partager avez % Dreporama Imparner Courrier électroruque Graver Nouveau dossier Rs | e 
2X Favoris Bibliothèque Images vganiser par: Dossier » 
M Bureau Échantilon d'imace 
2 Emplacements récents 
«cs Téléchargements pe. 
A Bibliothèques Chrysanthème jp Désertjpq Hortenses.ypg Méduses jpg Koala jpg Phare.jpg 
| 
Documents 9 


En Images 
E Mes images 


«% Groupe résidentiel 


1 Ordinateur 
2 Grtore (CA 


& Pod Photo Cache 


D Picasa Manchots.Jpg Tuhpes pq 
D Captures d'écran 
L wallpapers 


d Images publiques 
À Musique 
B vidéos 


Objet : Spécifiez l'objet 
Date de création : 14/07/2009 07:32 
e: 14/03/2008 13:59 Modifié le : 14/07/2009 07:32 
« : Ajoutez un mot-clé 


RE "E 
1: 1024 x 768 

le : 826 Ko 

Ajoutez un titre 

teurs : Corbis 

1: Ajoutez des commentai 
Ajouter du texte 
Modèle d'appareil … Ajouter un nom 


Figure 2.5 — L'Explorateur Windows permet à l'utilisateur de mieux se repérer en présentant à 


la fois l'ensemble des fichiers (vue globale) et des informations détaillées sur celui qui intéresse 


l'utilisateur (vue de détail). Lorsque les données sont présentées dans leur contexte, elles sont plus 


faciles à interpréter, car moins ambiguës. 


Positionner les éléments de l'interface pour qu'ils soienc utilisés dans le sens de lecture. 
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La saisie est plus rapide, plus intuitive, lorsque les zones d'interaction se suivent 
dans le sens de la lecture. Le parcours de l'interface est plus fluide et les mouvements 
oculaires sont plus naturels. 


Présenter les commandes et les données dans l’ordre d'utilisation. 


Les commandes doivent apparaître au moment où l'utilisateur en a besoin, dans 
un ordre cohérent par rapport à la façon dont elles sont utilisées pour accomplir la 
tâche. De même, la logique de présentation des données doit être similaire à celle 
habituellement utilisée sur les autres supports dont se sert l'utilisateur. 


Accueil - Microsoft Internet Explorer 


Ublisoteur : LAMBERT Gérard @ 


vAM 
D Contacts Dste ww Contact Obiet 
v CR vahes 02/10/06 Mr. Dupont Lorem @eum dolor sit amet 
besuvais 2005 09/10/06 Mu. Dupont Consectatuer adpicng alt 
04/10/06 Mr. Dupont Lore pau dolor sit amet 
Lie 2007 
» Corremordence 02/11/06 Mk. Durand Curabitur maurts lacus 
+ Courner général 02/11/06 Mr. Durand Pron nec oc 
+ Cortractuel 05/11/06 Ph. Curand Aqua ere volitpat 
+ Comptabiné 04/11/06 P.Ouisrdm Sumerdues cd 
+ Snotre 05/11/06 P, Dujérdn Polentesque corque lecus hendrerk din 
» Stotstque d 06/11/06  G. Lambert Laremn eu dolor «it amet 
06/11/06  G. Lambert Lorem peu dolor sit amet 
07/11/06  G. Lambert Lorem psum dolor sit amet 


Résuné 


Obiet : SALIMS LU! MICI - Cermande de rembourZ:ment, 2408 à la Lempése CU L avt 206 


Commentaires : 

Done vuli£ate lt néc tortoe, Aliquam erim, Créé eutnod métis ac dolor. Muilam sci are. Futce puvinar, Nuné ait 
amet turpis. Sd sed seen. Nils sésgdits ipaum. Ham grévidé neque, Suspendikss ruteum, rule non mattés susciput, leo 
nés Senper quan, acoumsan pelentesque fiquia lectus in anim. Pedlertesque mi. Integer a metus nec arbe trstique 
nonumry. Prassent à risi eget lacus faclisis commodo, 


Figure 2.6 — Sur cette interface de recherche pour un système documentaire, chaque zone de 
l'écran est dédiée à une tâche spécifique : 1) Recherche : L'utilisateur saisit les critères de 
recherche, 2) Affinage : || précise ses critères de recherche, 3) Résuitats : L'utilisateur visualise les 
différents documents répondant aux critères choisis, 4) Détaifs : || visualisé précisément le 
document sélectionné. L'ensemble de l'interaction se déroule de haut en bas et de gauche à droite, 
c'est-à-dire dans le sens de la lecture. 


2.2.2 Organiser selon le contenu 


Une seconde stratégie pour construire l'architecture de l'information consiste à 
s'appuyer sur le contenu des informations présentées dans l'interface. Cette approche 
est généralement mise en œuvre pour élaborer l'arborescence d’un site web. Les 
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regroupements sont construits en impliquant les utilisateurs à l’aide de la méthode 
dite du tri par carte (présentée en détail au chapitre 7). 


Cette méthode consiste à demander aux utilisateurs de regrouper eux-mêmes les 
informations. Les regroupements obtenus servent ensuite de base à la définition de 
l'arborescence du site. De cette manière, l’organisation proposée correspond à la façon 
dont les utilisateurs se représentent ces informations. Certe méthode garantit que la 
navigation dans le site ou dans le logiciel se fonde sur la perception des utilisateurs, 
sur l’image qu'ils se font du contenu de l'application. 


Toutefois, le cri par carte permet d'organiser les informations du point de vue des 
utilisateurs, mais il ne garantit pas que la navigation soic simple. Pour que l’utilisateur 
trouve facilement les informations qu'il cherche, le système de navigation doit être 
conçu de manière à le guider correctement et à faciliter le processus de décision 
inhérent aux différents choix qui se présentent lorsqu'il se déplace dans l'application. 


L'expérience de Miller a montré qu'il était préférable d'organiser les menus en 
largeur, plutôt qu'en profondeur [Miller 81]. Ce résultat se vérifie aussi bien pour un 
logiciel que pour un site web. 


La largeur d’un site correspond au nombre maximum de sous-rubriques accessibles 
depuis une rubrique donnée ou depuis la page d'accueil, tandis que la profondeur est Le 
nombre maximum de rubriques par lesquelles il faut passer avant d'atteindre une page 
terminale du site. Lorsque le site est agencé en largeur d’abord, l'utilisateur comprend 
plus facilement où il se situe. Il trouve plus rapidement les informations qu'il cherche. 


Minimiser la profondeur du site (3-4 niveaux maximum). 


Plus la profondeur du site est importante, plus les points de choix sont nombreux et 
donc difficiles à mémoriser. En règle générale, au-delà du 3° niveau, le visiteur risque 
de se perdre car il ne sait plus où il est. Il est donc préférable de ne pas dépasser ce 
niveau d’imbrication. 


Optimiser le nombre d’items par rubrique (8 sous-rubriques maximum). 


Pour une rubrique donnée, la sélection est d'autant plus facile qu’elle comporte peu 
de sous-rubriques. Au-delà de huit options, l'utilisateur doit procéder par comparaisons 
successives pour faire un choix. En limitant la taille de chaque rubrique, le temps 
de sélection est diminué. L'utilisateur effectue plus rapidement son choix entre les 
différentes sous-rubriques. 


Préférer une arborescence régulière. 


Plus l'arborescence du site est simple, plus elle est facile à mémoriser. Lorsque la 
structure du site présente une topologie régulière, sans branche isolée ni bifurcation 
inattendue, l'utilisateur se construit aisément une image mentale du site. Il apprend 
plus facilement à s'en servir. 
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Figure 2.7 — La méthode du tri par carte consiste à organiser l'architecture de l'information 
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es Utilisateurs à partir des informations présentées dans l'application. 
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Figure 2.8 — En réduisant la profondeur, l'utilisateur mémorise facilement les rubriques 
par lesquelles 4 est passé, tandis qu'il détermine plus rapidement son chernin si le nombre de 
choix est limité à chaque intersection. 


Déconseillé Préférable 
Figure 2.9 — Une structure régulière facilite la navigation dans le site 


car elle est plus simple à mémoriser. 


Nous reviendrons sur la conception du système de navigation proprement dit dans 
le chapitre suivant. 
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2.3 AGENCER POUR INTERAGIR 


Les types d’interface, leurs dimensions et leurs modes d'interaction se sont fortement 
diversifiés : site internet, logiciel, application web, smartphone, tablette, etc. Cepen- 
dant, quel que soit le support, la manière d'agencer les informations est toujours guidée 
par le même principe : faciliter la manière dont l'utilisateur interagit avec l'interface. 


2.3.1 Organiser l'espace 
Rendre cohérente la position des informations sur l’interface. 


Un positionnement cohérent des objets contribue à l’'homogénéité de l'interface. 
Pour cela, on utilise des gabarits d'écran. Les gabarits d'écran précisent l'agencement 
des contenus et des commandes pour les différents types de fenêtre ou de pages de 


l'application. 
Commandes 
1 Lie Zone de travail 


Zone de messages à lecture optionnelle 


Figure 2.10 — Le gabarit permet d'homogénéiser les différentes fenêtres de l'application 
et ainsi d'en faciliter l'apprentissage. 


Des gabarits cohérents sur l'ensemble de l'application permettent d’harmoniser 
l'ensemble de l'interface. L'utilisateur lit et mémorise Les informations plus facilement 


cat il sait où les trouver. 

Qui plus est, les gabarits sont un facteur d'homogénéité pour une ligne de produit 
logiciel. Ils renforcent le sentiment de confiance et la fidélisation des clients envers la 
marque. 
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Figure 2.11 — Les gabarits d'écran confèrent aux différents logiciels un « air de famille ; - 
ici la gamme Adobe avec Photoshop et Illustrator. 


Adopter des gabarits homogènes pour toutes les pages du site. 
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Figure 2.12 — Une présentation cohérente des pages d'un site web facilite son apprentissage 
car l'internaute retrouve sur chaque page des éléments de navigation similaires. 
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Une organisation cohérente pour un site web permet également à l’internaute de 
retrouver une disposition similaire d’une page à l’autre. Il a ainsi le sentiment de rester 
«au même endroit ». La prise en main est plus facile. Les concepteurs web utilisent 
généralement un schéma de page type qui leur sert de base pour l'ensemble du site. 


2.3.2 Le regard de l'utilisateur 


L'utilisateur ne regarde pas toujours l’écran de la même manière. On distingue deux 
grandes stratégies d'exploration visuelle. Lorsqu'il découvre pour la première fois 
une interface, l'utilisateur explore l'affichage en adoptant un balayage visuel en 
Z. Ce réflexe vaut pour une interface nouvelle mais également pour un afhchage 
chargé en informations. Le regard part du coin supérieur gauche de l’image, parcourt 
systématiquement la zone centrale et se cermine dans le coin inférieur droit. 


Figure 2.13 — Lorsqu'il découvre pour la première fois un écran, 
l'utilisateur le parcount en Z. 


Par contre, lorsque l'utilisateur connaît déjà le logiciel ou le sice, celui-ci effectue 
plutôt une exploration sélective. Il focalise son regard à certains endroits susceptibles 
de contenir les informations pertinentes recherchées plutôt que d'explorer l’ensemble 
de l’écran. Avec l'habitude, ou l'expertise, des comportements visuels se renforcent et 
le regard se déplace parfois plus vite, par anticipation, que l’écran ou la page web ne 
se rafraîchit pas immédiatement. 


Bien sûr, le regard est également attiré par certains contenus et leur mise en 
forme. Les images (photo, logo, visage) suscitent davantage les focalisations du regard 
que les textes à moins que ces derniers soient mis en évidence et se dérachent du 
reste de l'interface (grande caille, police de caractère, graisse). De la même manière, 
l'agencement des informations et leur regroupement favorisent une exploration 
visuelle en guidant le regard entre les différentes zones de l'interface. 


2.3.3 Parcours visuel d'une page web 


Il n'existe pas de parcours standard d'une page web car il varie selon le contenu, 
les visuels utilisés et leur résonance chez l'utilisateur, Toutefois, les tests mettent en 
évidence des modes de lecture récurrents [Gaillard 02]. En particulier, il apparaît que 
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le centre de la page est souvent vu en premier. Lorsque la page s'affiche, c’est au 
centre que l'internaute cherche les informations qui l’intéressent. Ensuite, son regard 
se porte en périphérie à gauche ou à droite. Enfin, l'internaute explore la partie haute 
de l'écran où il cherche la barre de navigation. 


31% 35% 10% 


56% 61% 


33% 42% 35% 


Figure 2.14 — Les tests montrent que les utilisateurs lisent la page selon l'ordre indiqué 
ci-dessus. Le pourcentage correspond à la proportion d'internautes ayant parcouru des yeux 
au moins une fois la zone. 


Ces observations sont confirmées par l'enregistrement des mouvements oculaires 
(eye tracking). Une étude quantitative menée auprès d’un panel de 200 internautes a 
mis en évidence des parcours oculaires semblables [psos 01]. 


Mettre les informations importantes au centre, en haut de la page. 
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Pour capter l’attention de l’internaute, l'information importante doit être vue en 
premier, donc apparaître au centre. Elle doit aussi être lue en premier ; pour cela elle 
doit être affichée en haut de la page. Autre intérêt de cet emplacement, le haut de 
page reste visible quelle que soit la taille de la fenêtre. 
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2.3.4 Accessibilité des éléments de l'interface 


Afin d'organiser l'interface, il convient non seulement de prendre en compte la 
visibilité des différents composants, mais aussi leur accessibilité à l'aide de la souris ou 
des doigts si l'écran est tactile. 


Pour une interface utilisée à la souris, les éléments placés dans les coins sont 


difficiles à atteindre car le mouvement est plus contraint que lorsqu'ils sont au centre 
de l'écran. 


Très visible Peu 
mais peu Zone très visible she 
accessible 

Très Zone la plus visible Très 
accessible et la plus accessible accessible 
Peu Ê Zone peu visible et peu actessible Peu 
accessible accessible 


Figure 2.15 — Selon leur position et les contraintes du mouvement 
de la souris sur un écran d'ordinateur, les différents emplacements ne sont pas équivalents. 


Pour les écrans tactiles, l'accessibilité des objets est à la fois relative à la taille de 
l'écran et à l’utilisation d’une ou deux mains. 


Pour un smartphone par exemple, l’utilisation d’une seule main (majoritairement 
le pouce droit) est souvent privilégiée. De ce fait, l'accès aux informations situées 
aux extrémités supérieures et notamment à gauche est contraignant. Au contraire, les 
éléments situés en bas à droite et autour de l'axe de mouvement du pouce (en haut à 
droite et en bas à gauche) sont plus accessibles sur un smartphone. 


Pour un écran plus grand comme une tablette ou un Smartphone en mode paysage, 
l'interaction à deux mains est plus aisée. Dans ce cas, les objets placés en bas et autour 
des coins sont plus facilement accessibles. 
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Très accessible 


Très Très 
accessible accessible 


Très 
accessible 


Très Très Très 
accessible accessible 


accessible 


Figure 2.16 — L'accessibilité des emplacements sur un écran tactile est directement liée 
à la taille de l'écran lui-même et à l'utilisation d'une ou deux mains. 


Veiller à ce que la main ou le doigt ne masque pas les informations affichées. 


L'utilisation du doigt comme moyen de pointage introduit une contrainte par- 
ticulière puisque le doigt lui-même, voire la main pour les tablettes tactiles, peut 
masquer tout ou partie de l'interface. Il est donc recommandé de veiller à ce que les 
éléments tactiles soient disposés de telle sorte que les interactions tactiles puissent 


être effectuées sans nuire à la visibilité de l'écran. 
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Fusillade à l'aéroport de Kaboul : 10 
morts, dont 8 soldats de l'Otan 


Patrons gratuitement mn diéeme met à da cent 
ma l'application Das de LE ur Cinsior. 


A l'hâura dés grand£ Blements 


Figure 2.17 — Sur la version tactile du site LeParisien.fr, la barre de navigation à gauche conduit 
l'utilisateur droitier à masquer l'écran lorsqu'il choisit un nouvel article. Au contraire, sur 
L'Expansion.com, la barre de navigation en bas de page permet de changer facilement de page 
tout en conservant une visibilité sur le centre de la tablette. 


Figure 2.18 — Sur l'application de gauche, le doigt masque le graphique lorsque l'utilisateur 
sélectionne l'indice à afficher. Au contraire à droite, la sélection se fait sous le graphique, 
sans obstruer là visibilité de l'écran. 


Q 
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2.3.5 Zones de manipulation 


La plupart des interfaces homme-machine se composent de zones de contenus, 
de panels ou de fenêtres, c'est-à-dire que l'écran est découpé en plusieurs espaces 
interdépendants : titre, barre de menus, zone de contenu, boutons de commande. 
Chaque zone regroupe un ensemble d'objets qui vont servir d'outils au dialogue entre 
l'utilisateur et l'application. 


Sur une interface, les zones de manipulation sont des espaces de l'écran sujets 
à de nombreuses sélections à la souris ou au doigt, par exemple une barre de 
menu, une palette d'outils ou un ruban comme sur Microsoft Office. Lorsqu'elles 
s'affichent, l'utilisateur commence par les lire. Les commandes importantes doivent 
donc apparaître en premier, dans le sens de la lecture. 


Organiser les zones de manipulation dans le sens de la lecture et en fonction de la fréquence 
d'utilisation. 


Sur un écran d'ordinateur, les commandes le plus souvent utilisées sont placées en 
haut et à gauche, tandis que sur écran tactile elles sont centrées en bas pour faciliter 
leur accès aux doigts. 


Menu horizontal Menu vertical 
Commandes Commandes Commandes Outils 
importantes fréquemment utilisées annexes importants 

Outils 
fréquement 
utilisés 


Outils annexes 


Figure 2.19 — Dans une zone de manipulation, les objets importants apparaissent en premier 
dans le sens de la lecture, tandis que ceux fréquemment utilisés sont placés au centre afin de 
faciliter la sélection. 


Les zones de manipulation vont être fréquemment parcourues des yeux par 
l'utilisateur qui y cherche les commandes à utiliser. Elles devront donc être conçues 
de la façon la plus compacte possible afin que l'utilisateur ait en permanence toutes 
les commandes sous les yeux et que pour une souris par exemple, le déplacement soit 
limité. 


Regrouper les informations. 


Le regroupement sert de base à l'agencement des différents objets de l'interface. Il 
permet de rapprocher les informations qui, du point de vue de l'utilisateur, sont liées 
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entre elles. En particulier, toutes les données nécessaires à l'accomplissement d’une 
même tâche sont rassemblées dans le même espace : c’est le principe de la composition 
des fenêtres. 


! Cy 4 3 à 7e Hogier Chap 02 2011 doc IMode de compatibilité} - Microsoft Word 
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Figure 2.20 — Le ruban Office à été conçu sur le principe du regroupement des fonctionnalités 
Yunctional chunking). Chaque onglet répond à un objectif qui se décompose en plusieurs groupes 
de commandes correspondant eux-rnêmes à des sous-objectifs. 


2.3.6 Les dimensions de l'écran 


L'agencement d'une interface est contraint à la fois par la manière dont elle est lue, et 
par la taille de l'écran dans lequel elle s'affiche. 


Concevoir la page pour qu'elle soit lisible en 1 024 X 768 pour un ordinateur et en 
320 x 480 pour les Smartphones 


Bien qu'elles ne soient pas exactement représentatives de l’ensemble de la 
population mondiale des utilisateurs d'Internet, les statistiques fournies par le site 
w3schools.com montrent que la quasi-totalité des écrans sont configurés en 1 024 x 768 
ou plus (99 %). Les résolutions inférieures disparaissent pour les ordinateurs alors 
qu'elles augmentent pour les terminaux nomades. 


Bien entendu, chaque site attire son propre public. Les seules statistiques à 
considérer sont celles des visiteurs effectifs du site lorsqu'il est en ligne. 


Résolution d'écran 2009 2010 2011 
supérieure 57% 76% 85,1% 
1024 x 768 pixels 36% 20% 13,8 % 
B00 x 600 pixels 4% 1% 0,6% 


Figure 2.21 — Les statistiques du site W3schools.com montrent qu'une grande majorité 
d'internautes utilisent une résolution graphique de 1024 X 768 pixels ou plus. 
L'évolution vers des résolutions d'écran plus importantes est très nette. 


La zone visible des pages d'un site web doit également prendre en compte l'affichage 
des barres de menu, favoris, adresse, etc. Ces éléments du navigateur vont réduire 
la zone d'affichage de la page. La partie de la page qui sera visible quelle que soit la 
configuration d'écran de l'internaute est appelée Safe Zone. Au regard des informations 
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fournies par l'outil Google browser size, elle correspond à 950 x 500 pixels pour 90 % 
des internautes. 


Figure 2.22 — L'outil Google browser size est un visualisateur de là taille de la fenêtre employée 
par les utilisateurs de Googjle. Il nous montre ici que seulement 50 % des internautes vont voir le 
bouton « Add to Cart » sans utiliser les barres de défilement. 


Pour résoudre le problème de la résolution d'écran, certains concepteurs web 
adoptent un agencement « fluide » en ajustant automatiquement la taille de la page 
à celle de la fenêtre. Cette technique permet de rendre visible le contenu de la page 
quelle que soit la résolution d'écran utilisée. Un agencement « fluide » est utilisé sur 
les versions mobiles d'un sire web car les résolutions varient d'un modèle à l’autre. 
Dans tous les cas, il est préférable de définir des résolutions minimales et maximales 
afin de garantir le confort de lecture. 


2.3.7 Longueur des pages web 


Quand il parcourt un site, l'internaute s'arrête à la première information qui l'intéresse. 
Il n’a généralement pas le temps ni d'explorer complètement les pages et ni de deviner 
ce qui est caché en bas de l'écran. Il est donc préférable que la page soit la plus 
courte possihle. Une page courte facilite la lecture. Au contraire, une page longue a 
tendance à désorienter l'utilisateur. Des érudes ont montré que les internautes perdent 
le contexte dès que la page dépasse 4 écrans [Levine 96]. 


Limiter la longueur des pages à un écran, voire deux écrans au maximum. 


Lorsque la page est trop longue, il faut la découper. Mais découper linéairement, en 
rajoutant un bouton « Page suivante » en bas de chaque section ne fait que ralentir 
la lecture. En effet, l'ouverture d’une page casse le rythme et demande à l'utilisateur 
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de garder en mémoire le contenu de la page précédente. Qui plus est, lorsqu'un texte 
est découpé en différentes sections, il n'est plus possible de l'imprimer en entier. 


Pour réduire efficacement la taille de la page, il faut revoir la structure du cantenu 
ec permettre une véritable navigation hypertextuelle entre les sections, chacune 
constituant un tout indépendant et apportant un complément d'information au reste 
du texte. Le texte initial doit donc être aménagé afin de diviser l'information en 
blocs cohérents. Les rubriques détaillant un point particulier deviennent des pages 
indépendantes accessibles par un lien depuis le corps principal du texte. 


Notons toutefois que l'internaute ne rechigne pas à utiliser les barres de défilement, 
au la molette de sa souris, lorsque le contenu de la page l'intéresse réellement. Il est 
donc parfois envisageable de dépasser la limite des deux écrans lorsqu'il s’agit d’un 
texte destiné à être lu, un article par exemple. Dans ce cas, l'internaute appréciera 
également de pouvoir imprimer le texte complet en une fois. 


Limiter la navigation à l’intérieur d'une même page. 


Lorsque la longueur de la page dépasse la hauteur de l'écran, les concepteurs web 
proposent parfois une zone de navigation locale qui permet d'accéder directement 
aux sections de la page, évitant ainsi d'utiliser les barres de défilement. Ce composant 
semble être un moyen de faciliter la navigation dans les pages longues à la manière 
d'un sommaire dynamique, mais il pose d'autres problèmes. 


En effet, les utilisateurs sont généralement déroutés par ces liens, dits locaux, car 
ils ont l'habitude d'ouvrir une nouvelle page quand ils cliquent sur un lien. Ici, le lien 
les amène à un autre endroit sur la même page. Le comportement n'est plus le même, 
bien que l'élément déclencheur soit le même : un lien. Il peut en résulter une certaine 
confusion [Nielsen 00]. 


Permettre un retour rapide en haut de page. 


Les barres de défilement, ou la molette de la souris, servent à parcourir verticale- 
ment la page. Mais le pas de déplacement est généralement faible afin de permettre 
la lecture tout en descendant dans la page. Cette lenteur est difficilement acceptable 
lorsqu'il s'agit d'atteindre le haut de la page. Pour cela, un bouton dédié est préférable. 
C’est probablement le seul cas où l'utilisation d’un lien interne à la page est conseillée. 


2.3.8 Poids des pages web 


L'être humain n’aime pas attendre et encore moins l'internaute car il se sert d'internet 
pour gagner du temps. Lorsque la page n'apparaît pas suffisamment vite, il « zappe » 
et passe sur un autre site. En 2000 une étude menée aux États-Unis [Chen 00] 
montrait qu'une majorité d'internautes n’attendait pas plus de 8 secondes. Une 
étude plus récente montre que ce délai peut descendre à 4 secondes [PhoCus- 
Wright/Akamai 2010]. La conclusion reste encore la même : les sites les plus visités 
sont ceux dont les pages se chargent le plus vite [Nielsen 99]. 


2013 Dunod. 


Copyright 


2.3 Agencer pour interagir 


hgne et formula À à 
fessionnels Associations SUERESRESE anal” moiiin 


> Famille Formation - Travail Justice : Logement Loisirs BATIR RRaICI I ICE 


vaté > État-canl - Identité - Authantifeaban > État civi > Livrat de famille 1 délivrance lors du ls naissance du premiar at 


S'abonner à la lettre (gratuit) y 1 RSS D) 1 OAIAS Eu 


ches 
Livret de famille : délivrance lors de la naissance du 
& premier enfant 
à Mis à jour le 16.09.2910 par Direchon de l'information légale et administrative 
te 
F(4) * Principe 


, jent-il ? 

* Comment l'obtenir ? 
”s * Coût 

* Remise du livret 


# + Mise à jour du livret 
le 
Principe 
1d 
$ Un livret de famille est délivré aux parents non mariés à l'occasion de la 


naissance de leur premier enfant commun. 


Que contient-Il ? 


Le livret de famille comporte les extraits d'actes de naissance des parents 
et l'extrait d'acte de naissance de l'enfant. 


Figure 2.23 — Dans cette rubrique, les liens semblent permettre d'accéder aux sous-rubriques 
du site. || n'en est rien ; ils conduisent vers des sections de la mêrne page. Ce type de lien n'à pas 
un comportement habituel, ce qui perturbe les utilisateurs. 


Alléger la page autant que possible. 


Malgré une réduction progressive de la « fracture numérique », il convient de 
toujours prendre en compte le poids des pages. Ceci vaut autant pour les connexions 
limitées en débit que pour les connexions nomades (ex. : smartphones, tablette) dont 
les vitesses de connexion ne sont pas encore équivalentes à l'ADSL et qui pâtissent 
des changements d'émetteur en mobilité. 


L'utilisation de composants dynamiques se généralise dans les pages web. Les 
cechnologies Ajax, en particulier, permettent de faciliter le chargement des pages en 
ne rafraîchissant qu'une partie du contenu plucôt que l'ensemble de la page. 


2.3.9 Mukti-fenêtrage 


Deux modes d'affichage des fenêtres sont possibles : par tuilage ou par recouvrement. 
Le tuilage est une organisation fixe des fenêtres sans possibilité de déplacement. Le 
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multi-fenêtrage par recouvrement, permet à l'utilisateur de déplacer les fenêtres les 
unes par rapport aux autres. 


Le principal avantage du multi-fenêtrage est la flexibilité qu'il offre : l'utilisateur 
organise l'espace de travail selon la tâche à réaliser. Dans la mesure où les fenêtres 
présentent plusieurs parties de l'écran indépendamment les unes des autres, elles 
permettent de mener différentes activités en parallèle, par exemple effectuer les 
commandes dans une fenêtre et visualiser le résultat dans une autre, comparer le 
contenu de deux fenêtres ou encore visualiser un point précis dans une fenêtre tout 
en conservant une vue globale dans une autre. Le multi-fenêtrage offre également 
l'intérêt de fournir plusieurs vues ou représentations du même objet applicatif, le code 
dans une fenêtre et le résultat généré dans une autre, par exemple. 


Faciliter l'accès et la compréhension des commandes de multi-fenêtrage. 


La gestion des fenêtres relève de la tâche d'utilisation de l'interface proprement 
dite. Plus elle sera simple, plus l'interface semblera facile à utiliser. Les différentes 
commandes liées au multi-fenêtrage, c'est-à-dire l'activation, l'ouverture, la fermeture, 
la réduction et le déplacement des fenêtres, doivent être à la fois faciles à utiliser et 
faciles à apprendre. 


Le multi-fenêtrage par recouvrement pose toutefois le problème de la visibilité des 
fenêtres, les unes recouvrant les autres. À l'inverse, en cas de tuilage, si l’espace fait 
défaut, l'utilisateur doit se servir des barres de défilement, chose fastidieuse. 


Utiliser le tuilage pour les utilisateurs occasionnels, lorsque les sorties sont prévisibles et 
que l'écran est suffisamment grand. 


Imposer un arrangement fixe des fenêtres est une perte de flexibilité, mais rend 
l’interface simple à utiliser et facile à apprendre. Il convient aux utilisateurs novices 
en informatique connaissant mal la manipulation des fenêtres. Il est toutefois recom- 
mandé de s'assurer que l'application autorise ce type de fenêtrage en vérifiant que 
toutes les informations peuvent être affichées à l'écran sans demander à l'utilisateur 
de se servir des barres de défilement. 


Minimiser la quantité d'informations à mémoriser d'une zone à l'autre. 
Afin de réduire le travail de mémorisation, il est préférable que toutes les informa- 
tions relatives à une tâche soient placées dans une même zone. Ce regroupement des 


informations favorise leur association pour une meilleure mémorisation. 


Autoriser les recouvrements de fenêcres pour les utilisateurs expérimentés, lorsque les 
sorties ne sont pas prévisibles ou les écrans petits. 


Le multi-fenêtrage par recouvrement offre l'intérêt de permettre à l’utilisateur d’or- 
ganiser lui-même son espace de travail. Il est particulièrement apprécié des utilisateurs 
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expérimentés qui maîtrisent les outils informatiques. En fait, le multifenêtrage ne 
présente un gain de performance que pour les utilisateurs expérimentés qui n’ont plus 
d'effort d'apprentissage à faire. 


Autoriser la mémorisation d'un arrangement de fenêtres. 


Bien entendu, pouvoir organiser à son gré l'arrangement des fenêtres ne présente 
un véritable intérêt que dans la mesure où cette opération n'a pas à être répétée à 
chaque nouvelle session. 


2.4 CONCEVOIR LA PAGE D'ACCUEIL 


La page d'accueil est vue par tous les visiteurs du site. Pour certains d’entre eux, c’est 
parfois la seule page qu'ils verront. À la lecture de la page d'accueil, l'internaute se 
construit une première impression du site. Son rôle est donc stratégique. C’est en 
quelque sorte une vitrine : elle présente le contenu tout en donnant à l'utilisateur les 
moyens de pousser plus loin la visite. 


Entrée du site, la page d’accueil doit être informative avant toute chose. Sa mission 
est difficile : montrer les services proposés et donner à l’inrernaute les rudiments pour 
se servir du site. Trois éléments y apparaissent : 

+ l'identité du site, 

e les informations utiles, 

° les fondements de la navigation. 


Chez soi Produits 


Neves Habitat 


habi tat à Bonjour, bienvenue sur Le site www.habitat.net 


Suppotiachpique Rangnaation de produt £Cantnhurbhon 


Figure 2.24 — Quelle est la vocation de ce site ? 
Pensez-vous y trouver des meubles ? 
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Indiquer explicitement la vocation du site. 


L'objectif principal de la page d'accueil est d'exprimer la vocation du site : À 
quoi sert le site ? Quels services propose-t-il ? Pour communiquer ce message, les 
concepteurs s'appuient sur deux éléments qui se retrouvent sur la plupart des pages 
d’accueil : un slogan et une phrase de bienvenue. 


Répondre aux questions de l'internaute dans la page d'accueil. 


Au travers de la page d'accueil, l'internaute cherche à savoir si le site répond à son 
attente. S'appuyant sur les tests utilisateurs qu’il a conduits, Steve Krug nous explique 
que les utilisateurs se posent généralement quatre questions lorsqu'ils arrivent sur un 
site : « Qu'est-ce que c'est ? Que puis-je faire ici ? Qu'est-ce qu'ils ont mis ici ? Pourquoi 
dois-je être là ? » [Krug OI]. 

La page d’accueil doit permettre de trouver la réponse à ces questions. Pour cela, 
elle fournit à l'utilisateur une vue globale du site en précisant le contenu, l'organisation 
générale et le rôle des principales rubriques. La check-list ci-après permet de vérifier 
le contenu de la page d'accueil. 


Check-list de page d'accueil 


Quels services rend le site ? Que peut-il offrir à l'utilisateur ? 
Comment fonctionne le site ? 


Pourquoi ce site ? Quel est son objectif ? 
Que contient-il ? 

À qui s'adresse le site ? 

Qui en est responsable ? Qui contacter ? 


Fournir les repères de navigation depuis la page d'accueil. 


Second objectif de la page d'accueil : expliquer à l’ucilisateur comment naviguer 
dans le site. Pour cela, la présentation et le libellé des rubriques doivent être semblables 
à ceux utilisés dans le reste du site. De cette manière, l’utilisateur peut généraliser ce 
qu'il apprend sur la page d’accueil à l'ensemble du site. 


Éviter les écrans d'introduction et les tunnels. 


Les écrans d'introduction (splash screens), ou les « tunnels » composés de plusieurs 
écrans, ralentissent inutilement l’accès au site. Les concepteurs sont conscients de leur 
faible intérêt puisqu'ils prévoient généralement un bouton pour « sauter l'intro » ! Le 
plus irritant avec un écran d'introduction n'est pas tellement la perte de temps, mais 
plutêt la frustration qu'il engendre lorsque le contenu du site ne correspond pas à ce 
qu'on attendait. 


2.4 Concevoir la page d'accueil 
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Figure 2.25 — Dès l'entrée sur le site, l'internaute trouve la réponse à sa question : 
Qu'y a-t-il ce soir à la télé ? 


PMETANET 


Figure 2.26 — Au contraire, lorsque les entrées ne sont pas explicites, l'internaute ne sait pas par 
où commencer. Sur ce site, l'entrée cliquable est en fait le logo situé en haut à gauche de l'écran, 
alors que l'œil est principalement attiré par l'image centrale, puis le texte situé dessous. 
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Alléger la page d'accueil. 


Afin de réduire l’attenre, les pages du site doivent se charger rapidement, à plus 
forte raison la page d'accueil qui montre ainsi immédiatement à l'utilisateur qu'il est 
arrivé sur le site voulu. 


Pour une application, concevoir la page d'accueil comme un tableau de bord. 


Sur un logiciel, la page d’accueil fournit une vue de synthèse sur les données 
applicatives. Elle donne à l'utilisateur une vision globale de son activité et lui permet 
de prioriser ses tâches. 
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Figure 2.27 — Sur ce logiciel de gestion immobilière, Dovadis de Log'inspace présenté au 
paragraphe 1.5, la page d'accueil permet à l'utilisateur d'organiser sa journée de travail. 


K-d'école, comment le maguettage permet de répondre à des enjeux... 


2.5 CAS PRATIQUE : K-D'ÉCOLE, COMMENT LE 
MAQUETTAGE PERMET DE RÉPONDRE À DES 
ENJEUX FONCTIONNELS ET MÉTIERS COMPLEXES 


# 


2.5.1 Un environnement de travail dédié à l’enseignement 


K-d’école est un Espace Numérique de Travail (ENT) pour les collèges et les lycées, 
développé par la société Kosmos. IL s’agit d'un progiciel de gestion de contenu et de 
portails dédiés au monde éducatif. 


Cet espace numérique permet la création simple et rapide d'espaces pour les classes, 
les enseignants, les disciplines, les projets pédagogiques, les clubs, etc. Chaque espace 
peut disposer d'un blog, d’un forum, d’un agenda, d’un chat et d’un porte-documents. 
Les enseignants et les élèves, à travers ces espaces, deviennent les principaux produc- 
teurs de contenus. 


K-d’école propose un cahier de textes « numérique » : l'enseignant peut y préparer 
ses cours, organiser ses activités pédagogiques, les élèves peuvent y déposer leurs 
devoirs, accéder aux ressources pédagogiques, à des forums contextuels pour des 
questions-réponses avec l'enseignant. 


Pour les chefs d'établissements et les équipes de direction, K-d'école est un 
espace de diffusion d'informations ciblées (enseignants, personnels administratifs et 
techniques, parents, etc.). [l offre l'accès à des outils métiers, annuaires, emploi du 
temps, agendas personnels et de groupe. 


Kosmos fait appel à nous courant 2010 pour réorganiser et améliorer les interfaces 
de son application qui sont très riches fonctionnellement. 


2.5.2 S'appuyer sur l'architecture de l'information pour concevoir la 
navigation 


K-d’école est un portail multi-utilisateurs ouvert à des profils variés : les enseignants, 
le personnel de l'établissement, les élèves et les parents d'élèves. Il sert d’outil de 
communication et d'espace d'échange pour des usages variés : préparation des cours, 
remise des devoirs, cahier de texte, agendas, etc. Les multiples facettes de l'outil 
rendent son architecture complexe. La cohérence du système de navigation est donc 
rapidement apparue comme un élément clé de la refonte de l'application. 
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Nous avons donc conduit plusieurs groupes de travail avec l'équipe produit et les 
experts opérationnels afin de redéfinir l’architecture de l'information de l'application. 
Cette première étape a permis d'établir les fondations de la refonte de l'interface. 
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Figure 2.28 — Architecture de l'information de l'application 


2.5.3 Maquetter l'interface pour tester les modes de navigation 


Nous appuyant sur cette nouvelle architecture, nous avons réalisé avec l'équipe projet 
différentes maquettes qui nous ont permis d'évaluer plusieurs systèmes de navigation 
possibles en nous appuyant sur des scénarios d'usage typiques de cette application : 
le professeur publie son cahier de texte après un cours, l'étudiant remet un devoir, le 
parent d'élève consulte les résultats de son enfant, etc. 


L'utilisation des maquettes interactives permet de vérifier concrètement l'enchaîne- 
ment des actions ainsi que le feedback de l'interface. À chaque étape, l'équipe produit 
a pu valider la pertinence du contenu au regard des besoins des utilisateurs ainsi que 
la faisabilité technique des modes de navigation proposés. 


2.5.4 Valider auprès des utilisateurs grâce à une maquette haute-fidélité 


Finalement les maquettes ont été habillées graphiquement par le designer de Kosmos 
afin de pouvoir présenter des maquettes très proches du résultat final. On parle dans 
ce cas de « maquettage haute-fidélité ». Ces maquettes ont permis de mettre en valeur 
l'ergonomie et la facilité de prise en main du produit K-d'école. 


Les maquettes haute-fidélité ont été montrées à des groupes d'utilisateurs, acteurs 
de l'enseignement au sein des lycées et des collèges, afin d'évaluer en situation 
l'utilisabilité réelle de l'application. 
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2.5 K-d'école, comment le maquettage permet de répondre à des enjeux... 
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Figure 2.29 — Maquette interactive noir et blanc construite à l'issue des groupes de travail 


2.5.5 Une charte ergonomique pour guider les futurs développements 


Sur la base des retours utilisateurs, les maquettes ont permis de valider un ensemble 
de règles d'ergonomie qui constitue maintenant la charte ergonomique Kosmos. Cette 
charte est le document de référence des équipes R&D en charge du développement 
des nouveaux modules de K-d'École. 


Dès lors que l'application est complexe et que les usages sont multiples, la démarche 
de maquettage permet d’essayer et de tester différentes alternatives de conception 
rapidement sans avoir à se lancer dans des développements longs et coûteux. Cette 
démarche permet de limiter les risques dans la phase de spécification et d’initier les 
développements sur une base solide. 


K-d'École sera déployé à terme auprès de plus d’un million d'utilisateurs dans 
l’enseignement secondaire. 
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Figure 2.30 — Maquette haute-fidélité de l'application finale 


« La démarche ergonomique conduite avec Usabilis a installé l'ergonomie au cœur 
de notre conception logicielle. Ceci a eu pour conséquence de modifier une approche 
historique très ‘à plat” vers une approche plus en “profondeur” où les fonctionnalités 
simples et les plus importantes sont directement proposées et accessibles en T seul clic 
alors que les fonctionnalités les plus avancées sont placées en second plan. » 


Jean Planet 
Président Kosmos 
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« Sur le Web, l'utilisabilité est une question de survie. 

Si un site est difficile à utiliser, les gens partent. Si la page d'accueil ne parvient pas à énoncer 
clairement ce qu’elle est censée proposer et ce que les utilisateurs peuvent faire sur le site, les gens 
partent. Si les utilisateurs se perdent sur un site Web, ils partenr. Si les informations d'un site 
Web sont difficiles à lire ou ne répondent pas aux questions des utilisateurs cibles, ils partent. » 
Jakob Nielsen! , Useir.com Alertbox, 2003. 


3.1 Principes ergonomiques de navigation 
3.2 Concevoir le système de navigation 

3.3 Naviguer autrement dans une interface 
3.4 Les éléments du système de navigation 


3.5 Vérifier là navigation 


3.6 Cas pratique : Côte-d'Or Tourisme une application web conviviale pour collecter les 85 
informations touristiques 


L. Jakob Nielsen est expert dans le domaine de l'ergonomie informatique et de l’urilisabilité des sites 
wcb. Il est titulaire d'un doctorat en interaction hommc-machine, obtenu à l'université technique 
du Danemark. Jakoh Nielsen est l'inventeur de La méthode d'ingénierie de l’utilisahilicé : Usabiliry 
Engineering. 
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Chapitre 3. Construire la navigation 


3.1 PRINCIPES ERGONOMIQUES DE NAVIGATION 


Contrairement au monde réel où nous découvrons progressivement les lieux que nous 
visitons, une interface présente les informations « à plat ». Pour explorer ce monde 
virtuel, les éléments affichés à l'écran font office de panneaux indicateurs pour se 
diriger. Mais il nous est difficile de savoir s’il reste encore beaucoup de chemin pour 
atteindre notre but, car notre vision est limitée à un seul écran. 


Cette particularité est à l'origine de deux désagréments fréquents sur une interface : 
se perdre et attendre. 


Sur le web par exemple, les navigateurs n'offrent aucune vue globale de l'ensemble 
du chemin parcouru. L'internaute ne peut compter que sur le site lui-même pour l'aider 
à s'orienter. Lorsque la navigation est peu ergonomique, il se perd fréquemment. 


Lorsque la navigation est difficile, l'utilisateur doit ouvrir de nombreuses pages 
ou écrans. L'attente entre chaque page rallonge inévitablement la durée globale de 
sa tâche. L'ouverture d'une nouvelle page nécessite le chargement des éléments qui 
la composent et autant de connexions au serveur. Selon le débit du réseau et la 
puissance de calcul de l'ordinateur, ces traitements peuvent s’éterniser et parfois 
conduire l'internaute à abandonner. 


Lorsqu'il utilise une application logicielle ou qu'il visite un site, l'objectif de 
l'utilisateur n'est pas de naviguer. Il se sert de l'application dans le but de trouver 
une information, de résoudre un problème ou de consulter des données. La navigation 
n’est pas une fin en soi, c’est uniquement un moyen pour atteindre un objectif. 


Guider l'utilisateur pour faciliter la navigation. 


La navigation est une métaphore pour désigner le cheminement au sein de l’inter- 
face. Quand la navigation est complexe, les choix sont nombreux, la mémoire à court 
terme de l'utilisateur est rapidement saturée. Il est nécessaire de l'aider à s'orienter. 


Pour l'utilisateur, la navigation doit être la plus simple possible car c'est une activité 
secondaire par rapport à son objectif premier. Pour cela, la conception du système 
de navigation devra s'inspirer de notre façon de nous orienter dans le monde réel, 
c'est-à-dire permettre à l'utilisateur de savoir sur chaque écran : où il est, par où il est 
passé et ce qu'il y a ailleurs. 


Indiquer où est l'utilisateur. 


Il existe principalement deux moyens pour montrer à l'utilisateur où il se trouve 
et en particulier sur le web. La première consiste à changer la présentation de la page 
courante dans la barre de navigation, ce qui permet de signaler où se situe cette page 
par rapport aux autres rubriques du site. La seconde est de donner à la page un titre 
cohérent avec le libellé du lien sur lequel il vient de cliquer, ceci afin de rappeler au 
visiteur ce qu'il vient de faire et de renforcer sa compréhension de l’organisation du 
site ou du logiciel. 
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Indiquer par où est passé l'utilisateur. 


Souvent, le moyen le plus simple pour aider l’utilisateur à se repérer est de lui 
montrer le chemin par lequel il est déjà passé en changeant par exemple la couleur 
des liens, en modifiant le graphisme du bouton précédemment cliqué, etc. 


Sur les sites web, on trouve également un « fil d'Ariane » montrant à l'incernaute 
le trajet qu'il a parcouru depuis la page d'accueil. Cet élément d'interface permet à 
l'utilisateur de se repérer tout en rendant explicite l’organisation du site. [l est toutefois 
peu utilisé dans les applications logicielles car la profondeur de navigation est moindre. 
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Figure 3.1 — Le fil d'Ariane est un moyen efficace pour indiquer à l'internaute par où il est passé. 
Il permet dé comprendre facilement où se situe la page courante par rapport à la page d'accueil. 


Fournir une vue globale du contenu du site. 


Comme pour toute interface homme-machine, la navigation est plus facile lorsque 
l'utilisateur dispose d’une « vue globale ». Cette vue d'ensemble est fournie par la 
barre la navigation qui donne accès aux différentes rubriques du site. Elle permet à 
l'internaute d'estimer la taille de l'ensemble du site et d'identifier Les autres rubriques 
susceptibles de l’intéresser. 
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Figure 3.2 — La barre de navigation procure à l'internaute une vue « à plat » de chaque 
rubrique comprenant des sous-rubriques par thème. 


Veiller à la cohérence du système de navigation. 


Chacun des éléments du système de navigation constitue un indicateur qui permet 
à l’utilisateur de se repérer et de savoir où il se trouve dans l’interface. Un système de 
navigation fonctionne à partir du moment où il est cohérent, c'est-à-dire que le même 
libellé se retrouve dans la barre de navigation, dans le fil d'Ariane et comme titre de 
la page courante. 
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Figure 3.3 — La cohérence du système de navigation permet à l'utilisateur de comprendre 
clairement où il est. Ici, le titre de la page courante (Notre histoire) se retrouve à l'identique dans la 
barre de navigation et dans le fil d'Ariane. 


Agencer les rubriques dans l'ordre où elles sont utilisées. 


L'organisation de la barre de navigation s'apparente à celle d'un menu. Les rubriques 
y sont placées selon la façon dont l'utilisateur en a besoin, selon la fréquence de visite de 
la rubrique et selon son importance. L'agencement de la barre de navigation résulte de la 
combinaison de ces critères. Elle donne lieu à des tests d'utilisabilité afin de vérifier les 
hypothèses sur l'ordre et la fréquence d'utilisation des rubriques. 


Permettre une navigation directe pour les utilisateurs expérimentés. 


Selon le niveau d'expérience et d’exigence, les utilisateurs n'ont pas tous la même 
appréhension d'une interface. Le protocole de navigation, c'est-à-dire les moyens mis 
à disposition des utilisateurs, doit donc être suffisamment souple pour prendre en 
compte différents profils d'utilisateurs, du débutant à l'expert. 


Le débutant, utilisateur occasionnel, appréciera d’être guidé dans sa découverte. 
Il prendra le temps d'explorer les différentes rubriques, se construisant ainsi une 
représentation mentale de l'arborescence des fonctionnalités de l'application ou des 
thèmes du site. 


Au contraire, l'expert, utilisateur fréquent, préférera accéder rapidement aux 
informations qu’il pense trouver sans passer par des sous-menus, des fenêtres ou des 
pages intermédiaires. Pour ce dernier, un moteur de recherche permet d'atteindre 
directement certaines informations ou fonctionnalités par leur libellé. 


Ne pas demander à l'internaute de connaître le fonctionnement du navigateur. 


Un site doit se suffire à lui-même en termes de navigation. Il doit pouvoir être par- 
couru uniquement par ses propres liens. Il ne doit pas s'appuyer sur des fonctionnalités 
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du navigateur dont l'utilisateur ignore parfois même l'existence, comme par exemple 
le bouton « Rafraîchir ». 


Laisser l'initiative du dialogue à l'utilisateur. 


En règle générale, le dialogue homme-machine ne doit pas être directif. L'utilisateur 
doit pouvoir mener le dialogue à sa guise. En particulier, il convient d'éviter les 
impasses, c'est-à-dire permettre de revenir en arrière (Défaire, Annuler), d'abandonner 
le dialogue ou d'interrompre un traitement en cours. Néanmoins, le dialogue peut 
parfois être plus directif lorsque l'activité de l'utilisateur est fréquemment interrompue 
ou que la tâche se fait en séquences répéritives. 


Éviter les impasses. 


L'interface doit guider l'utilisateur et le conduire vers san objectif de la manière la 
plus fluide possible. À tout moment, des boutons ou des liens doivent lui indiquer le 
chemin à suivre. En aucune manière, il ne doit être « bloqué », sans aucun élément 
d'interaction lui montrant comment poursuivre son parcours. 
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Figure 3.4 — Cette page est une « impasse ». L'utilisateur n'est pas guidé 
pour continuer ses achats sur le site. 
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Ne pas multiplier les zones de navigation. 


Afin d'offrir un accès plus souple, les concepteurs web sont parfois tentés de répéter 
les boutons, dupliquant ainsi les zones de navigation. Cependant, des liens redondants 
ne font qu'augmenter la complexité de la page. 


Les entrées multiples sont source d'erreur. Elles conduisent généralement l’inter- 
naute à visiter deux fois la même page. Il voit les différents boutons comme des objets 
différents. Il pense donc qu'il s’agit de pages distinctes. Lors des tests, on observe même 
certains internautes cliquant sur les deux liens pour s'assurer qu'ils conduisent vers la 
même page [Nielsen 02]. 
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Figure 3.5 — Ce site comporte deux barres de navigation : l'une horizontale, l'autre verticale, Les 
mêmes liens apparaissent dans les deux zones. Mais conduisent-ils vers les mêmes pages ? Une 
seule zone de navigation aurait évité cette question inutile. 


3.2 CONCEVOIR LE SYSTÈME DE NAVIGATION 


3.2.1 Barre de navigation 


Dans une application logicielle, la barre de menus permet un accès pratique et 
thématique aux fonctionnalités disponibles. Elle fournit à l’utilisateur un point de 
repère stable sur l'ensemble des écrans de l’application. 


Afficher une barre de navigation sur tous les écrans de l'application. 


3.2 Concevoir le système de navigation 5] 


Sur le web, la barre de navigation apparaît sur toutes les pages du site au même 
endroit et avec la même présentation. La barre de navigation montre à l'internaute 
qu'il reste sur le même site. Elle permet un accès direct aux principales rubriques du 
site et un retour rapide à la page d'accueil. Ce type de système de navigation est appelé 
navigation persistante. 
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Figure 3.6 — Barre de navigation. 


Cadrer la barre de navigation en haut à gauche de la page. 


Placée en haut à gauche de la page, la barre de navigation est toujours apparente 
quelle que soir la taille de la fenêtre. En effet, lorsqu'on redimensionne une fenêtre, le 
coin supérieur gauche reste visible. De cette manière, la barre de navigation demeure 
accessible quelle que soit la taille de l'écran. Par ailleurs, cet emplacement confère à 
la barre de navigation une position dominante sur le contenu de la page. 


Éviter les barres de navigation « à géométrie variable ». 


Une barre de navigation est dite « à géométrie variable » lorsqu'elle change de 
présentation selon la page affichée. Par exemple, certains sites n'indiquent pas la page 
courante dans la barre de navigation. Effectivement, pourquoi laisser un lien vers la 
page qui est actuellement affichée ? Jamais l’utilisateur ne chercherait à aller à un 
endroit où il est déjà. Et pourtant, il le fait ! Les tests nous montrent que l'internaute 
clique parfais une seconde fois sur Le bouton de la page courante afin de vérifier qu’il 
est bien là où il souhaitait aller. 


Si le site ne lui fournit pas des repères stables pour s'orienter, l'internaute se perd. 
La barre de navigation constitue une zone de référence sur laquelle il s'appuie tandis 
que le reste de la page change en fonction du contenu. Sa présentation doit être 
constante sur l’ensemble des pages du site. 
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Figure 3.7 — L'utilisateur à choisi de visiter la page « Divertissements », 
mais il est surpris lorsqu'il arrive sur la page en question. 
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Figure 3.8 — Affichage de la page « Divertissements ». L'utilisateur ne retrouve plus les repères 
de départ : le haut de la page et sa barre de navigation ne sont plus les mêmes, le logo de la barre 
de navigation à changé et surtout, il a perdu le lien sur lequel il vient de cliquer. Une même 
présentation de la barre de navigation sur l'ensemble du site aurait évité ce problème. 
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3.2.2 Navigation contextuelle 


Les zones de navigation contextuelle sont des espaces indépendants de la barre de 
navigation persistante qui conduisent vers des pages traitant de thèmes connexes à la 
page courante. Elles sont spécifiques de la page affichée et dépendent parfois du profil 
de l'utilisateur (déterminé à partir de ses précédents parcours sur Le site). 


Proposer une zone de navigation contextuelle. 


L'objectif est de permettre à l'internaute d'explorer le site en fonction de ses propres 
sujets d'intérêt, voire de l’inciter à découvrir de nouvelles sections. Elles peuvent être 
placées pour cela, soit en dessous du corps de la page soit sur le côté. 


COMMUNAUTÉS FNAC ! LABO ET FORMATIONS | MAGASINS C | ADMÉRENT 


Pnoto TV, Vtéo Son, GPS, ebook Poil és pe Tirages (Cadeaux Spectscies 
caméscopes Home cinéma lecteurs MP3  tétéphones cuire photo &oofirets & voyages 


» Jours es maroues 


“BTE 
PASSONNE 


INFORMATIQUE 


ACCESSOIRES 
INFORMATIQUES, 
calculatrices 


€" CLELIERLES 

D cernes aoutaenrs OAES ACNÉAENTS 
ul VENTE 6 fLA£N 

tes 

El RAC IT CV IQ A 


» DÉCOUVREZ-LES ! 


Informatique 

Revrouvez bules n08 garnmes 64 MADODIE Ou Peti-0E, ON au rs DOTRDISS AMEN AUS CA LAMAAU GES Dies 
grandes marques. Découvrez égalemert nos imocimantes. écrans diaoues durs e1 ious nos autres 
bériohénques, scessoires al consommables catmuches d'encre cawars, clés 158, sscnchas 


UN ÉTÉ PASSIONNÉ | OADNATEUR PORTABLE E ŒaCS OO. MAC, PAD 
NETBOOK MIN-PC 
DISQUE OUR. CLÉ US 
soù 
Go US 30: USB 2 0 
IMPRIMANTE. BCANNER Mes 
62,61 € 
CLAMER. SOURIS 
EACOCHE 
Tabiatie tactèn Orar aux LUS portabés Oradr eur ua: portebie 
CARTOUCHE D'ENCRE. Accte P F8 HP Pavilion dmi-3238et Açots MacBooù Pro 2,7 GHz 
TOUER 19 Go WIFI 118" 1F0 + PuparOrtve 13,3" LED Cors 
RÉSEAU CPL. WF » Voy fous ls proguits 
il 
499 €° 399,90 €° 1 449,90 €° 
lai cofites à can de 499 € 
RENE v 
NDEOPROJECTEUR = Vok tous les produits » Voh tous les produks » Voir tous lé produite 


BUREAUTIQUE 


Figure 3.9 — Cette page est l'entrée du rayon « Informatique et logiciels » de ce site. Les zones 
« Accessoires Informatiques » au centre et « Meilleures ventes » à droite offrent une navigation 
contextuelle. Elles complètent le thème central de la page. 


Cette navigation est généralement appréciée des internautes car elle semble moins 
dirigée et plus intuitive que la navigation imposée par la barre de navigation. Elle 
permet d'approfondir les thèmes traités dans la page courante et d'aborder des sujets 
annexes. 
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3.2.3 Navigation web 


Malgré des différences de graphisme d’un site à l’autre, la navigation web se standardise 
pour le plus grand bien de l'internaute qui s'y retrouve plus facilement. Une majorité 


de sites ont adopté un système de navigation s'appuyant sur les éléments du schéma 
suivant. 
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Figure 3.10 — Gabarit standard de navigation. 


Le logo du site est placé en haut à gauche. Il a une position dominante par rapport 
au reste de la page. Effectivement, le logo représente le site et au-delà, l’entreprise à 
laquelle appartient ce site. [l englobe donc naturellement l’ensemble des pages. 


Les concepteurs web ont pris l'habitude d'associer au logo un lien vers la page 
d'accueil. C'est logique et cohérent avec le rôle englobant du logo. Mais les tests nous 
montrent que peu d'utilisateurs connaissent ce lien, seuls les internautes avertis s'en 
servent. Îl est donc préférable d'indiquer également le retour vers la page d'accueil par 
un lien dans la barre de navigation. 


En haut à droite apparaissent des utilitaires. Ce sont des éléments transversaux 
au reste du site qui ne trouvent pas leur place dans l'arborescence des rubriques car 
ils doivent être accessibles à tout moment par l'utilisateur. Les urilitaires sont par 
exemple : l'aide en ligne, le moteur de recherche, les conditions de livraison, le suivi 
de la commande, l'accès au panier (ou caddie), les contacts, etc. 


Deux types d'utilitaires sont à distinguer. Les utilitaires importants (ex. panier, 
compte client, recherche) sant affichés à droite en haut de page, tandis que les autres 
sont placés dans le bas de page (footer). Il s'agit par exemple, des mentions légales, du 
plan du site ou du contact presse. 


3.2 Concevoir fe système de navigation 


La barre de navigation horizontale permet une navigation primaire, c’est-à-dire 
l'accès au premier niveau du site. L'internaute atteint par cette zone les principales 
rubriques. 


Chaque page du site possède également une zone de navigation appelée navigation 
secondaire. Cette zone de navigation permet de se déplacer à l'intérieur d'une même 
rubrique. Selon les sites, elle s'affiche soit horizontalement sous la barre de navigation 
primaire, soit verticalement à gauche de la page. 
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Figure 3.11 — Ici, la barre de navigation primaire, représentée par des onglets, ouvre une zone 
de navigation secondaire horizontale (en bleu) qui permet d'accéder directement aux pages. 


La règle des 3 clics 


La première édition de l'ouvrage recommande : « Les principales informations doivent 
être accessibles Le plus rapidement possible (moins de 3 clics) ». Effectivement, compter le 
nombre de clics est un moyen simple pour s'assurer que la navigation est efficace. 


Mais les tests utilisateurs nous montrent que la complexité n’est pas une chose aussi 
facilement quantifiable. Il arrive que l'internaute parcoure facilement un site dans 
lequel il doit passer par de nombreuses pages, tandis qu'au contraire il reste bloqué sur 
une page car il ne comprend pas sur quel lien cliquer pour passer à l'étape suivante. 


Limiter la complexité de chaque clic. 


La difficulté de navigation ne réside pas à proprement parler dans le nombre 
“ de clics à effectuer, mais plutôt dans la charge cognitive induite par chaque clic. 
C Moins l'internaute se pose de questions avant de cliquer, plus la navigation est fluide 


S [Krug 01]. 


3.2.4 Navigation sur smartphone 


Les tablettes tactiles offrent une réelle liberté pour disposer les contenus et favoriser 
à l'interactivité avec les deux mains. Au contraire, les smartphone, du fait de leur 
Q moindre taille d'écran favorisent plutôt l’afhchage uniquement de contenus interactifs 
pour naviguer, en plus ou non d’une barre de navigation. 


En général, les sires web et les applications pour smartphone proposent une présenta- 
tion des menus sous la forme d’une liste unique — pouvant éventuellement être défilée 
verticalement. Chaque menu est présenté sur toute la largeur de l'écran, facilitant ainsi la 
sélection. La navigation dans les menus et sous-menus s'effectue par sélection successive, 
avec ou sans effet de transition de gauche à droite ou de haut en bas. 


Copyright © 2013 Dunod. 


Chapitre 3. Construire la navigation 


ProFlowers 


Ali Mather's Day Flowers & 
Favorites 


One Bozan Rainbow Mothers 
Day Roses » 
LI 


Shof 


: Mot her 


Gi _ 
$ 19.99 
|Bromss Products Bye _6romse Products By 100 Blooms of Happiness for 
Mom > 
Mother's Day a: 


Flower Specials 
Two Dozen Long Stemmed 


, , Rainbow Mothers Day Roses 
Birthday Gifts ; 


Special Occasion b 


Flower Types 


Figure 3.12 — Les menus sont affichés sur toute la largeur et là navigation semble s'effectuer de 
gauche à droite (Menu « Mother's Day » vers son contenu). 
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Sur smartphone, afficher la barre de navigation de préférence en bas de l'écran. 


La barre de navigation d'une application tactile est généralement affichée soit en 
haut soit en bas de l'écran, afin de faciliter son accessibilité. Le positionnement en 
bas est à privilégier pour des changements rapides de menus avec le pouce de la main 
tenant le smartphone. 


Limiter la barre de navigation à 5 boutons sur smartphone. 


Pour une application tactile, la dimension du doigt contraint le nombre et la 
disposition des boutons. Jusqu'à cinq boutons sont généralement admis sur smartphone. 
Ils permettent de concentrer pour chacun d'eux, soit une icône seule et explicite, soit 
un libellé court, soit les deux. Au-delà de cinq boutons, le pointage au doigt demande 
une précision peu confortable et l'affichage d'un libellé n’est pas suffisamment lisible. 
Ce nombre est défini en priorité pour un affichage en mode portrait, car les boutons 
pourront être simplement allongés et affinés en mode paysage. 


Privilégier une barre de navigation scrollable pour plus de 5 items. 


Lorsque le nombre de points d’entrée dans la navigation dépasse la largeur lisible 
de l'écran, plusieurs possibilités d'accès sont possibles. Toutefois, l'utilisateur doit être 
en mesure de les repérer facilement. Il peut s’agir d’un bouton de menu unique en 
haut de l'écran ou en complément des quatre autres boutons de la barre de navigation, 
ou encore une barre horizontale « scrollable » que l'utilisateur peut faire défiler d'un 
côté ou de l’autre. 


0135 D'UN 


3.2 Concevoir le système de navigation" 


(fl ant a Menu 
à 7 UNITED ARAB BANK 


GES 


Menu général 


Co:gle images / Actuatités \ Adresses plus 
» a 


Menu supplémentaire à droite 
pour les fonctions moins importantes 


Barre de navigation avec défilement horizontal 


Figure 3.13 — Différentes barres de navigation étendues sur smartphone. 


Un menu général à l'avantage, que ce soit pour un site web ou une application, 
de regrouper l'ensemble de la navigation sous la forme d'une liste déroulante. Dans 
ce cas, la longueur et donc le nombre d'entrées seront limités par la hauteur visible à 
l'écran pour un smartphone orienté en mode portrait. 


Lorsque le nombre de boutons ne peut être réduit à 5, il peut être judicieux que 
l’un des boutons permettent d'accéder à des menus supplémentaires afin d’y reléguer 
des niveaux de navigation et des fonctions de moindre importance. 


Finalement, la barre de navigation horizontale scrollable composée de plus de 
cinq boutons est une alternative intéressante. Elle permet d'accéder aux boutons non 
visibles, et moins prioritaires par défilement au doigt. 


3.2.5 Processus par étape : exemple de la descente d'achat 


La descente d’achat, appelée aussi check-out, désigne les dernières étapes du processus 
d'achat. À la fin de l’achat sur un site de e-commerce, elle permet au client de préciser 
ses adresses de livraison, de facturation et de fournir les informations de paiement. 


Ce type de navigation est appelé « processus par étape », car l’activité de l'utili- 
sateur est décomposée en différentes étapes indépendantes, à la manière des Wizard 
que l’on trouve dans le logiciel. Les recommandations énoncées ici pour les sites de 
e-commerce peuvent être transcrites à d’autres types de processus par étapes. 


Concevoir un processus par étape pour les tâches complexes réalisées peu fréquemment 
ou pour lesquelles l'utilisateur peut être interrompu. 
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La navigation en étapes est particulièrement utile lorsque l’on demande à l'utilisa- 
teur de réaliser une activité complexe, pour laquelle il a besoin d’être guidé soit parce 
qu'il ne la réalise qu'occasionnellement, soit parce que cette tâche est susceptible 
d'être fréquemment interrompue. 


Ordonner les étapes selon l'attente des utilisateurs. 


Sur un site de e-commerce, la descente d'achat se décompose en plusieurs étapes, 
chaque étape correspond à un objectif précis et simple pour l'internaute : 


1. Options de cadeau : emballage ou message personnalisé. 
. Choix de la méthode d'expédition et donc de livraison. 
Choix de l'adresse de livraison. 


Choix de l'adresse de facturation (si elle est différente). 


CU OR OF 


Choix du mode de paiement puis saisie des informations de la carte bancaire 
s’il s'agit d'un paiement électronique. 


Simplifier la descente d'achat. 


La descente est une étape importante du processus d'achat au cours de laquelle 
il est demandé à l'utilisateur de saisir de nombreuses informations. Qui plus est, 
ces informations sont importantes car elles conditionnent la réussite de l'achat. 
Toutefois, la descente d'achat est généralement perçue comme une charge de travail 
supplémentaire pour l'internaute qui n’a pas à fournir habituellement autant de détails 
lorsqu'il effectue un achat dans le monde physique. 


Toute distraction lors du processus d'achat est un risque que l'internaute aban- 
donne. Il convient donc d'éviter les liens transversaux, les publicités, les accroches 
pour des ventes complémentaires, etc. bref, tout élément qui risque de détourner le 
client de san chemin vers la page de paiement. 


C’est pourquoi, il est préférable de proposer des liens de crass-selling (ventes liées 
ou additionnelles) sur les pages produit, voire éventuellement sur la page Panier, et 
non pendant la descente d'achat. À tel point que certains sites, Amazon par exemple, 
préfèrent enfermer le client dans un « tunnel de commande » sans aucun lien vers le 
reste du site. 


Montrer à l'utilisateur l'étape courante. 


Un indicateur graphique doit guider l'utilisateur tout au long du processus et mettre 
en évidence l'étape courante par rapport au reste du processus d'achat. De manière à 
présenter de manière explicite le processus, il est également conseillé de numéroter les 
étapes et de titrer clairement chacune d'elles. Par ailleurs, afin que l'utilisateur garde 
le contrôle de sa navigation, il est recommandé de permettre à l'internaute de revenir 
aux étapes précédentes. 
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Figure 3.14 — Les différentes étapes de la descente d'achat 
apparaissent clairement aux yeux du client 


Mettre en évidence l’action principale. 


À chaque étape, un bouton permet d'avancer vers l'étape suivante. Ce bouton doit 
être mis en évidence de manière évidente aux yeux de l’internaute. C'est un élément 
fort de guidage. 
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Figure 3.15 — Sur Amazon, ce bouton permet de passer 
d'une étape de la descente d'achat à l’autre. 


La descente d'achat doit être courte. 


L'utilisation d'internet est motivée par un gain de temps, l’internaure appréciera 
donc que cette étape terminale de l'achat, relativement fastidieuse car elle nécessite 
de nombreuses saisies, soit la plus courte possible. Par ailleurs, plus la descente est 
courte, moins l'utilisateur se sent piégé ou retenu. 


Inversement, une descente d'achat trop rapide peut éveiller la méfiance de 
l'internaute ainsi qu'un sentiment de perte de contrôle, le processus étant trop rapide. 


La descente d'achat ne doit pas être trop courte. 


Il est à noter également que certaines cultures ne s'attendent pas à ce qu'un 
processus d'achat soit court et facile. À l'inverse des occidentaux, les Japonais, par 
exemple, accordent plus d'importance au processus de commande (étape à fortes 
conséquences). Au Japon, un processus trop court peut avoir un effet contreproductif. 


Ne pas imposer la création d’un compte client. 


En effet, dans le monde réel, nous ne devons pas décliner notre identité pour 
acheter un produit, pourquoi le rendre obligatoire sur internet ? Permettre au client 
d'acheter directement simplifie Le processus d'achat er réduit les étapes de saisie perçues 
négativement par la plupart des utilisateurs. Par ailleurs, cela réduit également les 
risques d’erreur et donc de traitement post-commande. 
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La création d'un compte peut être proposée au client afin de lui permettre de 
gagner du temps sur ses prochaines commandes, d'accéder à l'historique de ses achats, 
voire de profiter des avantages du programme de fidélisation. 


Notons que lorsque l'utilisateur n'est pas enregistré, il n'est pas possible de 
connaître la zone de livraison, il est alors recommandé de faire apparaître des frais de 
port génériques (Par ex. « XX€ pour la France métropolitaine ») plutôt que ne pas les 


afficher. 


Introduire une étape de validation avant le paiement. 


Les étapes de validation vont contribuer à renforcer le sentiment de contrôle de 
l'utilisateur sur le processus d'achat. Elles sont indispensables. À chaque étape clé 
du processus, une demande de validation permet d'éviter les erreurs et de gagner la 
confiance de l'internaute. 


En particulier, à la fin de la descente d'achat, une page de validation doit afficher 
les différents paramètres de l'achat (articles choisis, adresses de livraison et facturation, 
etc.) et permettre de les modifier. 


Permettre la modification du panier. 


Afin que l'internaute garde le contrôle du contenu de son panier, il est préférable 
qu'il puisse modifier à tout moment les articles qu'il a choisis en particulier au moment 
de l'étape de validation du panier. 


Indiquer clairement ce que va payer le client. 


Les coûts cachés seront très mal perçus par le client qui perd confiance dans un 
site qui ne lui facture pas le montant affiché. 


C’est pourquoi les frais de port devront être indiqués au plus tôt. À noter toutefois 
que dans le domaine du luxe, cette notion est moins marquée car le coût de livraison 
est généralement faible en comparaison de celui du produit. 


Mettre en confiance l'internaute au moment de l'achat. 


La dernière étape doit afficher exactement les informations de paiement (port, 
frais annexes, etc.) avant de valider l'achat. En effet, l’utilisateur doit maîtriser tous 
les paramètres de son achat afin de se décider. Il est également conseillé d'indiquer les 
modalités de retour au moment de l’achat afin de gagner la confiance de l'utilisateur. 


De même, dans un souci de transparence, qui est un vecteur de confiance, 
l'économie ou la réduction obtenue sera également indiquée au moment de l'achat. 


Montrer à l'internaute que le site est sûr. 
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Figure 3.16 — Arrivé à l'étape de validation du panier, l'internaute peut modifier les articles ainsi 
que les adresses de livraison et de facturation. 


L'indicateur de sécurité du navigateur n'est pas toujours suffisant car peu d’inter- 
nautes comprennent qu'il signifie que la connexion est sécurisée. L’ajout de logos (de 
banques notamment) au de textes explicatifs renforce la confiance de l'utilisateur. En 
particulier, un lien des informations détaillées sur le paiement sécurisé peut également 
permettre de mettre en confiance certains internautes. L'affichage d’un numéro de 
téléphone, voire d’une adresse physique ou d'un numéro officiel (RCS ou Siret pour 
une entreprise) peut également rassurer les utilisateurs. 
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Plus d'infon sur 3D Secure 


Figure 3.17 — Les logos bancaires vont contribuer à gagner la confiance des cyberacheteurs 


Clore la descente d'achat par une étape de confirmation. 


À la fin de la descente d'achat, une dernière étape dite de « confirmation » permet 
de fournir à l'internaute un retour sur la commande qu'il vient d'effectuer. Cette page 
de confirmation lui indique un numéro de commande ou toute autre référence qui lui 
permettra éventuellement de dialoguer avec le Service Client. 
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Chapitre 3. Construire la navigation 


Cette page doit pouvoir être imprimée et téléchargée. Il est conseillé d'envoyer 
également un e-mail de confirmation avec un récapitulatif de la commande. Certe der- 
nière confirmation transmise directement à l’internaute est généralement considérée 
comme le véritable élément de confirmation de la commande. 


Si possible, on permettra à l'internaute d'annuler sa commande directement sur 
cette page de confirmation. 


NAVIGUER AUTREMENT DANS UNE INTERFACE 


Les barres de navigation et autres systèmes de navigation présentés précédemment 
proposent une exploration guidée de l'interface. Ce type de navigation est adapté à la 
majorité des scénarios d'utilisation. Toutefois d'autres scénarios sont envisageables car 
les utilisateurs et les contextes d'utilisation peuvent être différents. Dans ce cas, afin 
de s'adapter à différents rypes d'usage, l'interface propose des systèmes de navigation 
alternatifs. 


Moteur de recherche 


Le moteur de recherche est l'outil idéal pour trouver une information précise. Que ce 
soit dans un site web et même un logiciel. Les utilisateurs s'en servent principalement 
dans deux cas. Sait, ils ne trouvent pas l'information rapidement par la navigation 
habituelle (liens, barre de navigation) car l'organisation des informations ne leur parle 
pas. Soit, ils savent ce qu'ils cherchent et préfèrent utiliser le moteur de recherche 
car il leur permet d'accéder rapidement et directement à l'information souhaitée, sans 
passer par une exploration du site. 
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Recherches récentes : Téléchargements récents 


Autun historique 


Téléchargements du site d'assistance : 1-10 sur 926 
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Tétécharger 


Mise à jour combinée Mac ÔS X 


Figure 3.18 — Le moteur de recherche permet à des utilisateurs réguliers du site 
(qui savent ce qui s'y trouve) d'accéder directement aux pages qu'ils cherchent 


Donner au champ de recherche l'apparence d'un champ de saisie, 


Copyrigl 


3.3 Naviguer autrement dans une interface 


Pour que son rôle soit immédiatement compris, le champ de recherche doit 
respecter les standards de l'interface homme-machine et prendre l'apparence d'une 
« boîte blanche » ; visuel que l'utilisateur associe avec la saisie de texte. 
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Figure 3.19 — Afin d'inciter l'utilisateur à taper son texte, il est préférable de laisser le champ de 
recherche vide. Ainsi dans cet intranet, le mot le plus recherché était « mot-clé » car la plupart des 
utilisateurs lançaient directement la recherche sans saisir de texte puisque le champ était déjà rempli. 


Simplifier les modes de recherche. 


Plutôt que de proposer des critères sophistiqués de recherche ou suggérer des 
opérateurs booléens (et, ou, etc.) peu connus du grand public, il est préférable 
d'optimiser la recherche sur quelques mots. En effet, les études montrent que la 
majorité des utilisateurs effectuent des recherches sur deux mots en moyenne et qu'ils 
ne savent pas se servir des fonctionnalités de recherche avancée. 


Permettre une recherche par sous-domaine. 
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Figure 3.20 — lci l'utilisateur peut restreindre le charnp de recherche 
en sélectionnant là rubrique sur laquelle porte là recherche. 


Restreindre le champ de recherche à certaines parties du site est un bon moyen 
d'éviter de noyer l'utilisateur sous une multitude de résultats non pertinents pour 
une part. [| convient toutefois d'être vigilant car de nombreux utilisateurs lancent la 
recherche sans porter attention à cette restriction, ce qui peut être source d'erreurs. Il 
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Chapitre 3. Construire la navigation 


est donc préférable de ne pas limiter le champ de recherche en proposant, par défaut 
une recherche sur « tout le site » par exemple, réservant l’utilisation de la recherche 
restreinte à des utilisateurs avertis. 


Optimiser la recherche. 


Pour que le moteur de recherche fournisse des réponses pertinentes aux utilisateurs, 
il convient d'optimiser les résultats de la recherche en veillant à : 


e Indexer régulièrement l’ensemble des pages du site ou de la documentation 
de l'application logicielle afin de disposer quotidiennement d'une information 
récente et à jour. 

e Classer les résultats selon la manière dont ils répondent aux critères de recherche 
de façon à afficher dès les premières pages les résultats les plus pertinents pour 
l'utilisateur. 

e Fournir un titre à chaque résultat et une description courte afin de faciliter la 
lecture des résultats de la recherche et leur compréhension. 


Il arrive trop souvent que le moteur de recherche soit vu comme la hauée de 
sauvetage d’un site trop riche et mal organisé. En fait, c'est généralement l'inverse ! 
Un moteur de recherche fournit des résultats pertinents à condition d’indexer soi- 
gneusement toutes les pages du site. Dans le cas contraire, l'utilisateur est rapidement 
noyé sous les réponses du moteur. Un moteur de recherche ne facilite la navigation 
que lorsqu'on sait ce qu’on cherche. 


Recherche thématique 


Un index thématique est un inventaire structuré des connaissances que l'on peut 
trouver sur un intranet, une documentation d'aide pour un logiciel ou pour assister 
l'utilisateur dans sa démarche de recherche de mots-clés. 


Fournir un index thématique pour explorer un ensemble d'informations. 


L'index thématique permet à l'utilisateur d'explorer les informations disponibles 
sans avoir à connaître la dénomination exacte de ce qu'il cherche. En d'autres termes, 
c'est une façon d'aller « à la pêche » aux informations. 


Bien entendu, cet index doit être régulièrement mis à jour. Non seulement les liens 
doivent être vérifiés, mais aussi les informations que contient l'index. En particulier, 
lorsqu'un nouveau thème est créé, les nouvelles informations qu'il contient doivent 
être catégorisées et mises en avant par rapport aux moins récentes. 


Par contre, pour l'utilisateur qui sait précisément ce qu'il cherche, l'index théma- 
tique est peu rapide à utiliser. [Il préférera se servir du moteur de recherche qui lui 
permet d’aller directement à l'information souhaitée. 
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3.3 Naviguer autrement dans une interface 


Cliquer sur las tubriques pour naviguer. 
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Figure 3.21 — L'index thématique permet ici de parcourir l'intranet en raffinant progressivement 
son champ de recherche aux catégories concernées. 


3.3.2 Plan de site 


Pour aider l'internaute à retrouver une information sur le site, une carte du site est 
également efficace car elle permet de comprendre l'organisation globale du site. Elle 
est à la fois un index thématique et une vue globale à plat de l'architecture du site. La 
carte est également appréciée pour sa lecture rapide par les déficients visuels qui ainsi 
n’ont pas à slalomer dans les différents menus déroulants. 
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Figure 3.22 — La carte du site est un moyen simple pour aider l'internaute à retrouver une 
information, car elle fournit une vue globale du site. 


À noter que des visites trop fréquentes à cette page peuvent également être 
synonyme d’une architecture de l'information mal organisée pour un site web. En effet, 


Chapitre 3, Construire la navigation 


si la navigation proposée ne correspond pas aux attentes des utilisateurs, ils seront 
susceptibles de chercher d'autres modes de navigation avant peut-être d'abandonner. 


3.4 LES ÉLÉMENTS DU SYSTÈME DE NAVIGATION 
3.4.1 Le fil d'Ariane 


L'idée de base du fil d'Ariane (breadcrumb trail en anglais, qui se traduit littéralement 
par « chemin de miettes de pain »}) est de montrer le parcours effectué par linternaute. 
Plus exactement, le fil d'Ariane indique les rubriques qui séparent la page d'accueil de 
la page courante. 


ou Appelez 41018 
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nie C s 


Figure 3.23 — Fil d'Ariane. 


Occupant une ligne de texte, le fl d'Ariane offre l’intérêt de prendre très peu de 
place sur la page. Bien que discret, la majorité des utilisateurs comprennent son rôle 
d'indicateur de pasition dans le site. Par contre, ils ne voient pas immédiatement que 
le fl d'Ariane peut aussi leur servir à revenir en arrière. 


Placer le fil d'Ariane sous la barre de navigation au-dessus du titre de la page. 


Le fl d'Ariane est une aide à la navigation : il indique le chemin parcouru et 
permet de revenir rapidement en arrière. Il a donc un rôle annexe par rapport au reste 
de la page. Il est donc préférable de le placer en hauteur, au-dessus de la page. 


Utiliser « > » entre les niveaux. 
La présentation du fil d'Ariane s’est standardisée. La plupart des sites emploient 
le signe «> » entre chaque rubrique. Un signe différent demande à l'utilisateur 
un effort d'interprétation supplémentaire, sans compter le risque d'une mauvaise 


compréhension. 


Indiquer le titre de la page courante dans le fil d’Ariane. 


Dans un souci d'économie, certains sites confondent le fil d'Ariane avec le titre de 
la page. Cela désoriente généralement l'utilisateur. 
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Figure 3.24 — Ce site a choisi une présentation non conventionnelle pour son fil d'Ariane. 
Il risque de ne pas être compris par certains internautes. 


En effet, pour que le repérage soit efficace, les deux éléments que sont le titre et le 
fil d'Ariane doivent apparaître distinctement. C'est la redondance entre les deux qui 
permet à l'internaute de se repérer. 
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Figure 3.25 — Lorsque le titre de la page n'apparaît pas 
dans le fil d'Ariane, ce dernier ne permet plus de se repérer dans le site. 


Le fil d'Ariane agit comme une sorte de plan sur lequel l'utilisateur situe la page 
courante qu’il reconnaît par son titre. Lorsque les deux sont mélangés, il est perdu. 


3.4.2 Les onglets 


Popularisés par le site amazon.com, les onglets sont maintenant un standard de la 
navigation web. Occupant le haut de l'écran, l'utilisateur les identifie dès l’ouverture 
de la page. Leur fonctionnement est compris facilement, probablement parce qu’il 
s'agit de la métaphore d’un objet que nous connaissons tous : les intercalaires. 


Le seul inconvénient notable de cet élément est qu’il n'est pas possible de 
l'imbriquer. Les onglets ne sont efficaces que pour deux niveaux de profondeur. 
Au-delà, ils doivent être complétés par une navigation secondaire. 


Dessiner correctement les onglets. 
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Figure 3.26 — Barre de navigation à onglets. 


Le graphisme de la barre d’onglets précise le fonctionnement de ce composant aux 
veux de l'internaute en s'appuyant sur deux éléments visuels : l'onglet sélectionné 
est mis en évidence et il englobe la page courante. Lorsque ces indices sont absents, 
l'utilisateur pense qu'il s’agit de boutons. 


CPUs Motherbhoards SSDMDD GPUs Mobile [TDatacenter 


Figure 3.27 — L'internaute a ouvert la page en diquant sur l'onglet « Mobile ». Mais, rien ne lui 
indique où il est désormais. Bien qu'elle ressemble à une barre d'onglets, cette barre de navigation 
n'en offre pas les avantages. 


Présélectionner un onglet dès la page d'accueil. 


La meilleure façon de montrer à quoi servent les onglets est de les utiliser dès la 
page d'accueil. En voyant l'onglet « Accueil » sélectionné sur la page d'entrée du site, 
l'utilisateur comprend que les onglets servent à naviguer entre les rubriques du site. 


} 1 3 Du 


Ne pas employer des onglets pour un processus par étapes. 


- L'intérêt d’un système d'onglets est de permettre un accès asynchrone au contenu 
des différents onglets. L'utilisateur décide lui-même du choix des onglets qu’il souhaite 
consulter. Lorsque la tâche doit être réalisée dans un ordre précis avec différentes 
étapes intermédiaires, il est préférable d'employer une autre métaphore. Nous revien- 
drons sur ce point un peu plus bas. 
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Figure 3.28 — L'onglet « Accueil » est sélectionné dès l'entrée sur le site 
afin d'expliquer comment fonctionne la barre d'onglets. 
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Figure 3.29 — Dans ce logiciel de emañing un système d'onglets est utilisé pour représenter les 


différentes étapes du processus. Une telle métaphore est source d'erreur car les onglets sont 
habituellement accessibles indépendamment les uns des autres. 


———_—_————————————— _ Chopitre 3. Construire la navigation 


3.4.3 Les menus déroulants 
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Le principal intérêt des menus déroulants est le gain de place, puisque seule la barre 
de navigation est affichée en permanence. Ils présentent également l'avantage d'offrir 
un accès rapide aux sous-rubriques en faisant apparaître au clic ou au survol de la 
souris, une zone rectangulaire, un menu, contenant des liens vers les sous-rubriques. 


Le menu « classique » 


Utilisé également sur le web, il n'est qu'une reproduction parfois malheureuse de la 
barre de menus logicielle. Car les menus déroulants ne permettent pas à l'internaute 
de se construire une vue globale de l’ensemble du site. La comparaison entre les 
différentes rubriques est difficile car un seul menu est visible à un instant donné. Seuls 
les familiers du web apprécient ces menus qui leur permettent de balayer rapidement 
l'ensemble du contenu du site. 


Éviter les sous-menus. 


Les menus déroulants sur Le web sont souvent plus sensibles que sur les applications 
logicielles. Lorsque la souris quitte le menu, il s'efface automatiquement. Quand 
l'utilisateur est peu habitué à la souris, on observe des disparitions intempestives 
du menu. Et ce phénomène est amplifié si le menu comporte des sous-menus. Le 
mouvement de la souris doit être encore plus précis. Souvent les utilisateurs s’y 
reprennent à plusieurs fois pour sélectionner un item. 
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Figure 3.30 — La sélection d'un item du sous-menu est délicate car l'utilisateur ne peut pas 
l'atteindre directement. Pour éviter que le menu ne s’efface, il doit effectuer un angle droit, alors 
que la ligne droite semble plus naturelle. 


Prévoir un second mode d'accès. 
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Il arrive que les tests nous montrent des utilisateurs exaspérés par la précision 
requise pour utiliser les menus. Afin de rendre le site accessible à tous, des pages 
« sommaire » offrent un accès plus classique aux rubriques par une liste de liens comme 
illustré ci-dessous. 
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Figure 3.31 — Afin de remédier aux problèmes de manipulation, 
le site propose d'atteindre également les rubriques par des pages de liens. 


Le méga-menu 


Les méga-menus sont apparus ces dernières années sur le web. Lorsqu'ils sont ouverts, 
ils s’approprient une part importante de l'écran afin de présenter l’ensemble des sous- 
menus. 


Contrairement au menu déroulant classique, le méga-menu présente les sous- 
menus qu'il comprend sous forme de colonnes et de groupes d'informations. [l permet 
ainsi d'afficher un grand nombre de liens vers les deuxième et troisième niveaux, 
tout en présentant des illustrations facilitant le repérage des différents groupes de 
sous-menus. 


Principalement utilisé par les sites e-commerces, le méga-menu est devenu la 
solution idéale pour présenter dans une même fenêtre, la diversité des offres, plutôt 
que de recourir à de multiples menus dans une barre de navigation souvent déjà 
chargée. 


Limiter le méga-menu à 500 pixels de haut. 


Le méga menu ne doit pas dépasser la ligne des 500 px de manière à être facilement 
lisible pour tous les utilisateurs quelle que soit la résolution de leur écran. 
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Figure 3.32 — Méga-menu 


Préférer l'affichage du méga menu au clic plutôt qu'au survol souris. 


Lorsque le méga-menu s'ouvre au clic, il est plus facile à utiliser et ne se ferme 
pas si l’utilisateur déplace le pointeur hors de la zone active (principe de « contrôle 
utilisateur »). 


Regrouper les sous-rubriques sans charger visuellement le méga-menu. 


De manière à guider la lecture, les sous-menus sont regroupés sous un titre ou un 
pictogramme. Seuls les éléments visuels contribuant au guidage doivent être conservés, 
à plus forte raison si le menu contient beaucoup de liens. En général, les zones de 
merchandising dans les menus de navigation sont à proscrire, car elles s’apparentent à 
des bannières publicitaires. 


3.4.4 Les boutons de navigation 


Les boutons de navigation sont les composants graphiques utilisés comme liens dans 
la barre de navigation. 


Préférer du texte pour les bouions de navigation utilisés peu fréquemment. 
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3.4 Les éléments du système de navigation 


En général, Les utilisateurs réguliers d'une application préfèrent les icônes. Pour 
un site web, les visiteurs fréquents finissent par retenir la signification des icônes 
et apprécient la concision des visuels autant que la place ainsi gagnée au profit du 
contenu de la page. 


En revanche, les visiteurs qui viennent sur le site pour la première fois ont peu de 
chance de comprendre immédiatement la signification des icônes. Pour eux, des liens 
textuels seront plus faciles à interpréter. 
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Figure 3.33 — Afin de gagner de la place à l'écran, les icônes sont parfois utilisées dans les barres 
de navigation comme ici à gauche. Mais sans texte associé, leur signification est difficile à deviner. 


Éviter d'employer des icônes sans texte explicatif. 


Un texte est généralement moins ambigu qu'une icône. Mais le texte prendra plus 
de place à l'écran. Un compromis consiste à indiquer dans le graphisme le libellé du 
bouton, bénéficiant ainsi à la fois de l'esthétique du visuel et de la lisibilité du texte. 


Sur certains sites et logiciels, une bulle d’aide ou tooltip apparaît pour expliquer 
la signification des visuels (attribut 41: en html) au survol de la souris. Mais, cela 
ne résout pas le problème. En effet, les tests nous montrent que les utilisateurs ne 
réussissent généralement pas à faire s'afficher la bulle d'aide. En effet, il faut pour 
cela que la souris soit immobilisée pendant presque une seconde au-dessus de l’image 
(700 ms en Windows). C'est beaucoup trop pour quelqu'un qui ne sait pas ce qui va se 
produire. En général, les bulles d'aide ne sont pas vues par les internautes. 
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Figure 3.34 — La combinaison du graphisme et du texte évite les ambiguïté. 


D'ailleurs, elles n’ont pas été conçues pour cela. Cette fonctionnalité existe pour 
permettre aux personnes malvoyantes de « lire les images » en se servant d'un logiciel 
de synthèse vocale. 


3.4.5 Les liens 


Le lien est le composant de base de la navigation web. Il permet à l'internaute de se 
déplacer dans le site au même titre que les menus d’une interface logicielle. C’est Le 
premier élément, et peut-être le seul, dont il faut savoir se servir pour utiliser le web. 


Ne pas changer la couleur et le comportement par défaut des liens. 


On observe, lors des tests, que les internautes s'appuient sur le changement de 
couleur des liens pour faire le tri entre les pages qu'ils connaissent et celles qui 
leur restent à découvrir. Le changement de couleur évite de « tourner en rond » en 
repassant sur des pages qui ont déjà été ouvertes. 


Éviter les liens trop courts. 


La Loi de Fitts nous dit que « le temps pour atteindre une cible est fonction de la distance 
et de la taille de cette cible » [Fitts 54]. Ce principe s'applique également au web : plus 
le lien est petit et éloigné du pointeur souris, plus l'internaute met de temps à cliquer 
dessus car il demande une sélection minutieuse [Berkun 00]. 


Les liens doivent donc être suffisamment grands pour être faciles à sélectionner. 
Attention toutefois à ce que le soulignement ne nuise pas à la lisibilité du texte. Il est 
déconseillé de mettre un lien sur une phrase complète. 


Par ailleurs, un lien est plus facile à atteindre lorsqu'il est en périphérie de l’écran 
car alors le mouvement de la souris est contraint par les bords. Cette abservation 
incite à positionner les liens en bordure de page. 


3.4 Les éléments du système de navigation 


Droit du travail > contrat de travail > 


Votre contrat de travail 


En droit français, Il existe différents types de contrat de travail: 


Le contrat ägurée indéterminée {CDI), le contral à durée déterminée (CDD), le contrat temporaire où d'intérim, le 
contrat à wi js partiel, les contrats jaunes (contrat d'apprentissage, contral de professionnalisation), le contrat 
inkiativa antploi (CIE), … 


informez-vous sur les règles da conclusion de vatre contrat de travail pour savoir, par exemple: 


e Si la loi impose de signer un contrat écrit, 

« Quelles sont les mentions qui doivent obligatnirement figurer dans cel écrit, le cas échéant, 

- Vérez si les clauses stipulées dans votre contrat da travail sont conformes à la loi, 

e Vos droits lorsque votre employeur souhaite modifier un point de votre contrat de travail, 

e Comment cette décision s'impose-+-elle à vous, ou commant pouvez-vous légitimement la refuser. 


Figure 3.35 — Probablement pour des raisons esthétiques, ce site ne distingue les liens ni par 
leur couleur, ni par leur présentation. Pour deviner où sont les liens, l'internaute doit explorer la 
page à la souris. 


p Can someone [lat all the factors of wiry a pokeman would be ban from wifi 


{TT You post your best nichname for any Pokemon that you wish. | then rate 10. 
Jump to Page: 1 [21314151617181. | 4043 | 4044 | 4045 | 4046 | 4047 | 4048 | 4049 | 4050 


Figure 3.36 — Plus le lien est petit, plus il est difficile à sélectionner. 


Limiter les liens sur les interfaces tactiles. 


La surface de sélection d’un lien est faible. Sur une interface tactile, la sélection 
d'un lien nécessite donc plus de précision qu'avec une souris. Dans ce cas, il est 
conseillé de réduire le nombre de liens et surtout de maximiser les espaces entre les 
liens pour éviter toute erreur de sélection. 


Placer le lien à la fin d'une phrase ou du paragraphe. 


Lorsque les liens apparaissent dans le texte de la page, la sélection et l'affichage 
de la page correspondante interrompt le fil de la lecture. Il est donc préférable que 
la lecture soit suspendue lorsque l'utilisateur sélectionne le lien et ouvre la nouvelle 


page. 


Le texte du lien doit permettre de deviner le contenu de la page. 


Le libellé des liens est un élément déterminant pour une navigation efficace. Le 
texte doit être explicite et sans ambiguïté pour éviter de faire fausse route. Il doit 
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permettre à l'internaute de prévoir, avant de cliquer, où il va arriver. Autant que 
possible, ce texte doit correspondre avec le titre de la page visée. 


Pour cela, les liens doivent être conçus en fonction de l'information qu'ils vont 
permettre de trouver et de l'objectif de l'utilisateur sur le site. Rappelons que la 
compréhension du libellé des liens peut être vérifiée très tôt lors de la conception du 
site en menant un test de perception (voir chapitre 2). 
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Catalogue 
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Actualités 
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Figure 3.37 — Un utilisateur intéressé par la consultation de livres numériques hésite entre les 

rubriques « livres en lignes », « collections » et « catalogue » qui correspondent pour lui à la même 

finalité. Des libellés différents, voire plus de détails sur le contenu de chaque rubrique, permettent 
de lever l'ambiguïté. 


Placer les liens sur les mots-clés. 


Il est préférable de placer les liens sur des termes décrivant le contenu de la page 
que l'internaute va atteindre, plutôt que de le guider explicitement en lui indiquant 
l’action à réaliser. 


Pour accéder au site du W3C : Une excellente source d’information : 
cliquer ici le site du W3C 
Déconseillé Préférable 


Figure 3.38 — Un guidage trop explicite rend la lecture fastidieuse. 


Ne pas répéter des liens similaires sur une même page. 


3.4 Les éléments du système de navigation 


Les cests nous montrent que la duplication d'un même lien incite généralement 
l'internaute à visiter deux fois la page, pensant que les deux liens conduisent à des 
pages différentes [Nielsen 02]. Ces répétitions rendent la navigation fastidieuse. 


Il est donc conseillé de n'indiquer le lien qu'à la première occurrence du mort. 
Néanmoins, dans le cas des pages longues, il peut être utile de répéter le lien en bas de 
page. Dans ce cas, on vérifiera lors des rests si cela ne conduit pas l’utilisateur à ouvrir 
deux fois de suite la page en question. 


ATTENTIONI 
The Southwest Church of Christ has been moved to its own domain (vw swest org). 


Please click here to ga there. 


Figure 3.39 — Les deux liens de cette page conduisent au même site, mais rien ne l'indique. 
inévitablement, l'internaute se demande lequel choisir. Un seul lien, ou le même intitulé, aurait 
évité ce problème. 


Les liens doivent être cohérents sur tout le site. 


La navigation est simple lorsque les indicateurs sont homogènes. Pour cela, il convient 
de veiller à ce que les liens libellés de la même manière conduisent vers la même page et, 
inversement, qu'une même page soit toujours désignée de la même manière. 


Prévenir l'internaute lorsqu'un lien conduit vers un document volumineux. 


Lorsque le lien désigne un fichier, par exemple un exécutable ou un document, il 
convient de préciser le type, la taille ainsi que le temps d'attente prévisible, afin que 
l'internaute décide s’il est utile d'ouvrir ce fichier. 


Pour les images, un affichage en miniature et un lien vers l’image grand format est 
un bon compromis. Il présente l'avantage de donner au visiteur une première idée de 
l’image et de lui laisser la possibilité de l'afficher en haute résolution s'il le souhaite. 


Éviter d'afficher les liens externes dans une nouvelle fenêtre. 


Les liens sont dits externes lorsqu'ils conduisent vers un autre site. Certains 
concepteurs web affichent le nouveau site dans une seconde fenêtre ou onglet. Mais 
ces nouvelles fenêtres sont généralement jugées envahissantes par les internautes qui 
les associent aux fenêtres publicitaires (pop-up) qui apparaissent sur certains sites. 


Qui plus est, l'affichage de la nouvelle fenêtre brise l'historique du parcours. 
L'internaute se retrouve bloqué, ne pouvant plus revenir en arrière, chose qu'il 
n'apprécie généralement pas [Nielsen 99]. 


Pour ces raisons, il est préférable d'afficher le nouveau site dans la même fenêtre, laissant 
à l'internaute averti la possibilité d'ouvrir le lien dans un nouvel onglet s'il le souhaite. Une 
petite icône peut accompagner le lien externe afin de le distinguer d’un lien interne. 


Dunod. 


2013 


VA 
F4 


Copyright 


= Chapitre 3, Construire a navigation 


AVG Anti-Virus Free Edition 2011 10.0.1321 
(Windows) 

Topics: Antivirys Software 

Source: AVG Technologies USA 
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on Facabook with security software 
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Dorortloud 


gaming and one of the fastest 
scanning speeds on the market. 

AVG's Community Protection Network EE 
Related Content shares the latest threat information with the online community 
to ensure everyone recaives the highest form of protection 
possible, and AVG's Protective Claud Technology serves as an 
early warning system to block new threats and reduce false 
positives. 


Bd E-mail this page 


FREE Registration is requirad 


{Is this item miscategorized? Does it néed more tags? Let us 
know.) 


Format: Software Size: 5,368 KB 
Date: Mar 2011 version: 10.0.1321 
License: Free 


Platforr: Windows 


Figure 3.40 — Cette zone de téléchargement est bien détaillée puisqu'elle précise non seulement 

les caractéristiques du lagiciel concerné version, type de licence et plate-forme), mais aussi la taille 

du fichier. Cependant, l'internaute ne connaît pas ici le type du fichier qu'il va recevoir ni le temps 
nécessaire à son téléchargement, l'obligeant à attendre la fin du téléchargement pour le savoir. 


3.5 VÉRIFIER LA NAVIGATION 


Il existe un test très simple qui permet de vérifier la conception du système de 
navigation. Steve Krug l’appelle le test du coffre [Krug 01]. Il consiste à montrer à 
différents utilisateurs, représentatifs de la population visée, une des pages du site ou 
du logiciel et leur poser les questions suivantes. 


Check-list de test du système de navigation 


Y 


v 
C4 
# 
# 


De quel site s'agit-il ? 

Quelles sont les rubriques du site ? 

De quelle page s'agit-il ? 

Où se situe la page par rapport au reste du site ? Sous quelle rubrique ? 
Que peut faire l'utilisateur depuis cette page ? 


Le test est reproduit sur un ensemble significatif de pages du site ou d'écrans de 
l’application logicielle. Il sert à vérifier les crois exigences du système de navigation, à 
savoir : construire une vue globale, savoir se repérer et permettre de comprendre les 
rubriques environnantes. 
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Cas pratique, Côte-d'Or Tourisme une application web conviviale. 


3.6 CAS PRATIQUE : CÔTE-D'OR TOURISME UNE 
APPLICATION WEB CONVIVIALE POUR COLLECTER 
LES INFORMATIONS TOURISTIQUES 


3.6.1 Une base de donnée unique pour un usage multiple 


Côte-d'Or Tourisme est l’agence de développement touristique de la Côte-d'Or. 
Afin de mener à bien ses missions, Côte-d'Or Tourisme a constitué une base de 
données départementale, regroupant les différentes informations relatives aux offres 
touristiques, en vue d'alimenter ses principaux supports de communication, tels que 
les éditions puis les sites internet. 


L'application permet aux différents prestataires touristiques de Côte-d'Or de 
renseigner leurs offres et ainsi d'alimenter le réseau de sites partenaires à l’aide d’une 
technologie de syndication de contenus. Par ailleurs, l'application est également 
utilisée par Côte-d'Or Tourisme pour gérer des informations autres que celles destinées 
à la consommation touristique. Les contacts administratifs, la diffusion de la docu- 
mentation, les clients particuliers, les agences de voyages, l'observatoire touristique, 
la valorisation paysagère sont désormais gérés par le même portail. 


Cet outil est au cœur du métier de Côte-d'Or Tourisme et de l’ensemble de son 
organisation interne. La base de données départementale est donc particulièrement 
stratégique, tant en ce qui concerne les contenus que sa structure, son fonctionnement 
et son ergonomie. 


Ayant la vocation de recueillir des informations auprès des nombreux prestataires 
touristiques, cette application s'adresse à un public varié, et rarement technophile, de 
la TPE (restauration, théâtre), l'association (organisation festivité) aux particuliers 
(location saisonnière). 


3.6.2 Une application répondant aux fonctionnalités mais difficilement 
utilisable 


Cependant, après deux ans d'exploitation et l'ajout de nombreuses fonctionnalités, 
force a été de constater que l'application était particulièrement difficile à utiliser, à 
plus forte raison pour un usage ponctuel, une ou deux fois par an, lorsqu'il s’agit de 
modifier les horaires ou les tarifs d’une manifestation touristique par exemple. 


Afin de rendre l'application plus simple et moins contraignante pour ses parte- 
naires, Côte-d'Or Tourisme nous à demandé de l’accompagner dans la refonte de 
l'ergonomie. 
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Figure 3.41 — Première version de l'interface de l'application 


3.6.3 Des maquettes interactives validées par les utilisateurs finaux 


Suite à un audit de l'application, nous avons conduit une série d’ateliers de maquettage 
avec la maîtrise d'ouvrage du projet, le responsable des développements et des 
représentants des utilisateurs. 
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Figure 3.42 — Maquette fil de fer réalisée à l'issue des ateliers de maquettage 
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3.6 Cas pratique, Côte-d'Or Tourisme une application web conviviale... 


Les maquettes interactives que nous avons réalisées ont permis de valider concrète- 
ment les différentes étapes du processus de collecte des informations relatives aux offres 
touristiques. Chaque étape du processus a été analysée par l'ensemble de l’équipe afin 
de s'assurer que les informations demandées étaient utiles à la diffusion de l'offre sur 
le réseau Côte-d'Or et qu'elles pouvaient facilement être fournies par les prestataires 
touristiques. 


Le vocabulaire utilisé sur chaque page de l'application a été également vérifié et 
validé par les utilisateurs. Des messages de guidage ont été rajoutés lorsqu'il y avait un 
risque d'ambiguité. 


3.6.4 Un design rassurant et convivial 


Nos designers ont ensuite habillé graphiquement les différentes pages conçues dans 
la phase de maquettage. L'objectif principal de ce nouveau design a été d’inspirer 
confiance aux utilisateurs en proposant des tonalités rassurantes, mais aussi conviviales 
et sobres. 
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Figure 3.43 — Design graphique final de l'application 


Le bandeau marron orangé procure une atmosphère rassurante et chaude à 
l’ensemble de l'écran. L'espace de travail est marqué par un gris fonctionnel qui 
s'inscrit sur le fond blanc de la page, renforçant ainsi le sentiment de solidité et de 
sobriété. 

Les arrondis et les dégradés fournissent du relief, tandis que les ombrages légers 


apportent une texture et de la modernité à l'interface. Le bleu du bouton de 
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validation tonifie l'écran. Ces éléments contribuent conjointement à la convivialité 
de l'interface. 


3.6.5 Le résultat : des données touristiques précises et exactes 


Depuis 2011, l'application est utilisée sur l’ensemble du département de la Cote d'Or 
par 4 000 prestataires. Elle permet de gérer plus de 11 000 offres touristiques qui sont 
ensuite diffusées sur les nombreux supports d'information et de communication du 
département. 


La prise en main est maintenant immédiate, rendant beaucoup plus facile la mise 
à jour. Cette nouvelle interface permet désormais à Côte-d'Or Tourisme de garantir à 
l'ensemble de ses partenaires des données précises et exactes pour l’ensemble de ses 
prestations touristiques. 


« L'audit ergonomique a été une étape indispensable à la refonte de l'application. H 
nous a permis d'avoir un avis extérieur, nécessaire pour prendre le recul suffisant dans la 
conception des interfaces. 


De plus, l'expertise ergonomique s'est révélée indispensable afin de justifier les choix de 
conception auprès de nos partenaires institutionnels. » 


Isabelle COROND 
Directrice adjointe Côte-d'Or Tourisme 
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« Qu'un utilisateur n'ait pas à attendre inutilement est un principe de conception évident et bien 
attentionné. Il est aussi évident qu'il ne faut pas presser l'utilisateur, Le principe le plus général 
étant que les utilisateurs doivent donner le ton à l'interaction. » 

Jef Raskin!, The Humane Interface : New Directions for Designing Interactive Systems, 
Addison-Wesley Professional, 2000. 


4.1 Interagir avec l'interface 
4.2 Les éléments d'interaction 


4.3 Temps de réponse 


4.4 Cas pratique : charte ergonomique et refonte graphique du progiciel SAB 


INTERAGIR AVEC L'INTERFACE 


Lorsqu'il se sert d’une application interactive, l'utilisateur dialogue avec un système 
q PP Y 

informatique pour obtenir une réponse, résoudre un problème ou prendre une décision. 
C’est ce que nous appelons l'interaction, c'est-à-dire les moyens mis à disposition par 
l'incerface pour permettre à l'utilisateur er au système d'échanger des informations. La 
qualité de l'interaction est l'enjeu majeur de toute conception d'interface. Elle garantit 
l'efficience de la tâche réalisée : l'atteinte effective du résultat avec facilité et rapidité. 


L'interaction se décline en deux modalités : la saisie des données et la manipulation 
des informations affichées. 


1. Jef Raskin est spécialiste de l'interaction homme-machine. Il a conçu pour Apple l'interface du 
premier Mac OS. Jef Raskin est l'inventeur du drag and drop (glisser-dénoser). 


4.1.1 
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Concernant la saisie, Le clavier est le dispositif le plus utilisé et il ne semble pas 
trouver d’autres alternatives plus efficaces. 


La manipulation des informations, quant à elle, est effectuée à l'aide d’une souris 
pour les ordinateurs ou du doigt pour les interfaces tactiles. Ces deux modes de dialogue 
permettent une manipulation directe de l'information affichée, c'est-à-dire que l'action 
de l'utilisateur s'effectue sur l'interface comme sur des objets réels du monde physique. 


Clavier 


Saisir des informations sur une interface s’est toujours effectué avec un clavier, 
et sans doute encore pour longtemps. La reconnaissance vocale permet de ne pas 
utiliser d'outil intermédiaire avec l'interface mais son utilisation est contrainte par 
l’environnement sonore et surtout par une manière de parler particulière nécessitant 
une certaine concentration bien différente de l'élocution naturelle. 


L'utilisation d’un clavier est souvent considérée comme contraignante par une 
majorité d'utilisateurs. C'est pourquoi son usage doit être limité pour les utilisateurs 
occasionnels et les saisies textuelles particulières (ex. : la saisie d'informations dans 
un formulaire). 


La saisie au clavier peut toutefois être facilitée par une interface proposant des 
alternatives interactives telles que les listes déroulantes sur lesquelles nous reviendrons 
dans les prochains chapitres, ou la saisie assistée. 


Deux types d’assistance à la saisie sont à distinguer. Le premier, la correction 
automatique, consiste à corriger au cours de la frappe au clavier les saisies mal 
orthographiées par l'utilisateur. Le second, appelé autocomplétion, permet de suggérer 
à l'utilisateur la suite d’un ou plusieurs mots qu'il vient de saisir. Les navigateurs web 
permettent par exemple de suggérer des mots déjà entrés et mémorisés, de la même 
manière que les moteurs de recherche proposent des associations de mots pouvant 
affiner les résultats attendus par l'utilisateur. 


Raccourcis clavier 


L'ucilisation de boutons et de menus est parfois fastidieuse car l'utilisateur doit cliquer 
plusieurs fois pour déclencher une commande. Cette manipulation est d'autant plus 
contraignante lorsque l'opération est fréquemment réitérée. 


Permettre un accès rapide et direct aux commandes fréquentes par des raccourcis clavier. 


Des raccourcis clavier, c'est-à-dire l'appui simultané sur plusieurs touches, per- 
mettent de rendre l'interaction plus rapide. 


Cependant, les raccourcis clavier sont difficiles à apprendre, c'est pourquoi il 
est conseillé de limiter leur usage à un petit nombre de fonctionnalités et de ne 
proposer que des raccourcis déjà connus par l'utilisateur. Dans la mesure du possible, 
on privilégiera les raccourcis standard que l’on rencontre sur d'autres applications 
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Aller 


logicielles, par exemple : copier (ctr1 + ©), coller (ctr: + V}, ou enregistrer (ctr! 


+ S). 


Afficher les raccourcis clavier. 


Pour faciliter l'apprentissage, il est judicieux d’indiquer le raccourci clavier au plus 
près de la commande. Dans un menu par exemple, chaque raccourci pourra être affiché 
à côté du libellé de la commande. Pour un bouton, une bulle d’aide pourra s'afficher 
au survol indiquant le raccourci clavier. 


aide © 
Ctrit+x 3 | a+ ] 
. - ‘ À Rechercher - 
" subis c2 AaBbCcl k 
âller & Copier en tant que tracés £ Modifie ||$se Remp 
; = | 
Copier l'image CtrisAlt+C 5 D 1Ttre6 es 1 Séecténner 
Copier l'emplacement de la vue  Ctd#C (r Modification 
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coller tri#+V 
Suporirrer 


| Remplacer (Ctri+H) 
| Remplace le texte dans le document. | 


Rechercher Ctri+F 


Actualisation CtritR 
Ctri+AÎt+R 


Figure 4.1 — L'affichage du raccourci permet à l'utilisateur 
d'apprendre progressivement à s'en servir. 


Manipulation directe 


La manipulation directe est le mode de dialogue utilisé sur la plupart des interfaces 
graphiques disposant d'une souris ou d'un autre moyen de pointage. Avec une 
interface à manipulation directe, l'utilisateur agit directement : il désigne l'objet, puis 
il sélectionne la commande. De ce fait, il est facile à mémoriser et facile à apprendre. 
Les erreurs sont moins nombreuses qu'au clavier. En effet, les objets étant toujours 
visibles et changeant de présentation en réponse aux actions de l’utilisateur, ce dernier 
a une meilleure visibilité sur le fonctionnement de l'interface. 


Ce mode de dialogue s'appuie sur la métaphore « du monde physique » qui veut 
qué l'utilisateur se serve de l'interface de la même manière qu'il utilise les objets 
du monde réel : en les « manipulant ». Pour cela, l'objet sur lequel porte l’action 
est visible à l'écran en permanence. La commande est transmise par une action 
physique simple, généralement un clic de souris ou un appui du doigt sur l'écran. Tout 
comme dans le monde réel, il est possible de faire et de défaire de la même manière ; 
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l’action élémentaire est généralement réversible car chaque commande dispose de son 
« inverse », généralement accessible de la même manière (ex. : annuler). 


En contrepartie, ce mode de dialogue ne fournit aucune indication sur la façon de 
s'en servir. Il n'est pas auto-explicatif à la manière des fenêtres de dialogue par exemple. 
Il peut donc être difficile à apprendre. Qui plus est, la manipulation directe nécessite 
parfois un effort de précision chez l'utilisateur, par exemple pour sélectionner de petits 
objets. 


La manipulation directe convient aux utilisateurs occasionnels ayant peu de 
connaissances informatiques mais connaissant néanmoins le domaine applicatif, ce 
qui leur permettra de pallier le manque de guidage de ce mode de dialogue. Par contre, 
des utilisateurs expérimentés auront tendance à préférer un dialogue clavier du fait du 
gain de rapidité qu'il présente. 


La principale caractéristique d’une interface à manipulation directe est la facilité 
d'utilisation. La Théorie de l’action (voir section A.2) nous permet de mesurer la 
complexité d'utilisation de l'interface par le biais de deux distances : la distance 
sémantique, entre le but visé par l'utilisateur et les objets de l'interface, et la distance 
articulatoire, entre l'action et sa représentation physique [Norman 86, Hutchins 
86]. S'appuyant sur cette décomposition, l'objectif, lorsqu'on conçoit une interface 
à manipulation directe, est de réduire ces distances afin de minimiser les processus 
cognitifs et moteurs pour la compréhension et l'interaction avec le système. 


Réduire la distance sémantique 


La réduction des distances sémantiques minimise les ressources cognitives nécessaires 
à la compréhension du système. Les informations et actions attendues ou adaptées au 
contexte doivent être mises en avant à l'inverse de celles qui sont moins fréquentes 
ou inadaptées à la situation. 


Adapter les fonctionnalités aux intentions de l'utilisateur. 


L'interface est plus simple à utiliser lorsque les fonctionnalités proposées répondent 
directement aux besoins de l'utilisateur, lui permettant de réaliser chacune des activités 
élémentaires liées à sa tâche. 


Présenter les résultats sous une forme directement exploitable. 
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Afin de faciliter la compréhension de l'interface, il convient de veiller à ce que les 
informations soient présentées de manière à ce qu'elles répondent aux questions que 
se pose l'utilisateur. 


Comptabilité Comptabilité 


Paiements en attente 14/09/10 Paiements en attente 14/09/10 
Nom Montant Échéance Encaissé 
Dupont 356 10/09/10 Oui ÉCHÉANCES DÉPASSÉES 
Smith 345 17/10/10 Non + 4 
Durand 787 07/09/10 Non Nom Montant Échéance Encaissé 
jones 421 22/09/10 Non Durand 787 07/03/10 Non 
Dubois 676 10/09/10 Non Dubois 676 10/09/10 Non 
White 861 30/08/10 Oui 

Déconseillé Préférable 


Figure 4.2 — Le système est plus facile à comprendre si les données affichées 
peuvent étre exploitées directement. 


Imaginons que l'utilisateur consulte le logiciel de la figure 4.2 afin d'identifier les 
personnes qui n'ont pas respecté l'échéance de paiement. Avec une fenêtre telle que 
celle de gauche, il doit tout d'abord isoler les paiements qui n’ont pas été encaissés 
puis vérifier qu'ils auraient dû l'être avant la date courante. Cette opération est longue 
et fastidieuse. Elle peut être évitée par un traitement automatique qui permettrait de 
ne présenter que l’information utile, comme l'illustre la fenêtre de droite. 


Cet exemple nous montre que la réduction des distances sémantiques nécessite 
une parfaite connaissance de l'activité de l'utilisateur. 


Réduire la distance articulatoire 


La réduction des distances articulatoires minimise les ressources perceptives et 
motrices liées à l'utilisation de l'interface. Il s’agit ici de faciliter Les opérations de bas 
niveau de l'interaction, telles que la manipulation et la lecture. 


Les commandes doivent se transcrire sous une forme physique. 


Une commande est plus simple à exécuter et plus facile à mémoriser lorsqu'elle 
s'exprime sous la forme d'un geste ou d’un appui (clic). Par exemple, pour déplacer un 
fichier, il est plus simple de déplacer l'icône correspondante vers le dossier cible que 
d'utiliser une fenêtre de dialogue détaillant ce déplacement. 
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Archiver | Liste des docurnents 
Nom: | | l Document 1 Archives 
De: | ro Document 2 
* 4 in Docurnent 1 
ocuement 
À : L__ EL 
Ok 
Déconseillé Préférable 


Figure 4.3 — La commande est plus simple lorsqu'un geste suffit 
pour l'exécuter. 


Les informations affichées doivent être non ambiguës et faciles à lire. 


L'affichage doit permettre d'interpréter rapidement le sens des données. En règle 
générale, un graphisme est plus simple à comprendre car le traitement est principale- 
ment visuel, contrairement à l'interprétation d'un texte qui fait appel à des ressources 
cognitives supplémentaires. 


Transfert Transfert 
Transfert en cours. Transfert en cours... 
Déconseillé Préférable 


Figure 4.4 — Un graphique s'interprète plus rapidement qu'un texte. 


Une représentation graphique permet à l'utilisateur d'interpréter rapidement la 
donnée affichée. Elle lui fournit immédiatement une information qualitative, un 
ordre de grandeur. L’indication est approximative mais elle suffit dans la plupart des 
cas. Les textes viennent ensuite compléter cette première lecture en apportant des 
informations quantitatives plus précises. 


Accompagner l'utilisateur dans l'interaction 


La manipulation directe s'appuyant principalement sur la représentation graphique des 
objets, il est essentiel de fournir un retour aux actions de l'utilisateur. Ce retour facilire 
l'apprentissage er comble en partie les difficulrés de compréhension rencontrées parfois 
avec ce mode de dialogue. 


Les retours garantissent la visibilité sur le fonctionnement de l'application. 
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Le retour du système vers l'utilisateur est un enjeu majeur dans la réussite 
de l'interaction homme-machine. Il s’agit pour l'utilisateur de lui garantir que la 
commande qu’il a initiée est bien celle reçue et enregistrée par le système. 


Les retours peuvent être mis en œuvre de différentes manières : en modifiant 
l'apparence de l'objet, en modifiant la forme du pointeur souris ou en affichant un 
message confirmant explicitement l’action réalisée. Pour un déplacement d'objet, il 
est préférable que l'objet en question reste affiché — sans modification d'apparence ou 
sous forme de silhouette, et suive le pointeur de l'utilisateur jusqu’à ce que l'objet ait 
atteint sa destination. 


Le retour peut également être physique. Par exemple, lorsqu'un clic maintenu 
est demandé, le fait que l'utilisateur doive garder le bouton de la souris enfoncé lui 
rappelle qu'il est entré dans un mode de dialogue spécifique. 


Avec les interfaces tactiles, le retour peut aussi être haptique, c'est-à-dire sous la 
forme d'une sensation physique d'action sur le doigt telle qu’une vibration courte. 


CE - CE 


ro < : 


Figure 4.5 — Choisir un intervalle par manipulation directe permet d'éviter l'erreur classique qui 
consiste à saisir une borne minimum supérieure à la borne maximum. lci un retour est proposé en 
affichant la valeur sélectionnée au-dessus du curseur. 


En outre, l'utilisation de signaux sonores peut être associée aux actions de 
l'utilisateur sur l'interface. Les sons peuvent intervenir soit à l'appui sur une commande 
(ex. : touches sonores d’un clavier numérique de téléphone), soit être initiés par le 
système pour notifier d'un changement d'état (ex. : e-mail reçu). 


Restreindre l’utilisation des alarmes sonores à un usage précis ec offrir la possibilité de 
régler le niveau sonore. 


Pour être efficace sans agacer l'utilisateur, voire l'embarrasser vis-à-vis des autres 
occupants de la pièce, un tel mode de mise en évidence doit être employé avec 
parcimonie, s'adapter à l’environnement sonore et pouvoir être paramétré. 


Limiter le nombre de sons différents (moins de 5). 
Choisir des sons distincts en timbre et tonalité. 


Afin de faciliter la mémorisation et de minimiser l'effet perturbant des alarmes 
sonores, il est préférable de minimiser le nombre de sons distincts. 
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Apprentissage de la manipulation directe 


Cependant, la manipulation directe peut présenter des difficultés d'apprentissage 
pour les utilisateurs débutants et, au contraire, sembler fastidieuse aux utilisateurs 
expérimentés. 


Faciliter l'apprentissage des utilisateurs débutants. 


On aidera les utilisateurs dans la phase d'apprentissage par un meilleur guidage en 
affichant des messages d'explication dans la barre d'état de la fenêtre de l'application, 
en fournissant un accès optionnel par un menu ou par une fenêtre de dialogue et en 
rendant l'interface sensible à la position de la souris sans requérir une action (un clic) 


de la part de l’utilisateur. 


Offrir un accès rapide aux utilisateurs expérimentés. 


À l'inverse, on utilisera les raccourcis clavier pour rendre plus rapide l'accès aux 
fonctions fréquemment utilisées par les utilisateurs expérimentés. 


Simplifier la sélection des données et faciliter les tâches répétitives. 


Sélectionner les objets à la souris devient vite fastidieux lorsqu'ils sont nombreux 
et éloignés. Il est donc recommandé de proposer également une sélection selon des 
critères textuels ou par une commande, comme Sélectionner tout par exemple. 


4.1.3 Souris 


Pour interagir avec une interface d'ordinateur, la souris est l'outil de dialogue le plus 
souvent utilisé. Elle offre l'intérêt de permettre un excellent contrôle du mouvement 
du pointeur, mais la souris demande un effort de coordination entre la main et la vue 
qui nécessite un apprentissage les premiers temps. 


Le principal critère à suivre lors la conception du dialogue souris est l’homogénéité. 

Le rôle des boutons de la souris doit être constant. 
Par exemple, la plupart des applications Windows permettent de sélectionner par 
le bouton de gauche et d'ouvrir un menu contextuel relatif à l’objet sélectionné par le 


bouton de droite. 


Ne pas déclencher des fonctions importantes (difficilement réversibles) par un simple clic. 


Il n'est pas rare d’appuyer involontairement sur un bouton de la souris. Une 
notification de l’appui sur une commande non réversible peut être préférable pour 
éviter ce type d'action involontaire. 


4. 
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Sélection Menu contextuel 


Figure 4.6 — Dialogue souris Windows. 


Améliorer la précision des saisies. 


Les manipulations à la souris requièrent parfois une précision qui rend l'interaction 
délicate. Dans ce cas, il convient de faciliter la manœuvre en proposant par exemple 
un effet magnétique ou bien, quand cela est possible, une saisie au clavier. 


Transparence 
Transparence : 0 D 90 0% () 
Corrections 
Luminosité: 2100 ———"@—199 0% gl 
Contraste : 100 — > 109 0 % 1, 
Netteté : 2100 pe ) 0 0 % ( 


Figure 4.7 — Sélectionner une valeur numérique par manipulation directe est parfois délicat. 
Au contraire, là saisie clavier est plus rapide et plus précise. Les champs à droite offrent donc une 
alternative pour les utilisateurs expérimentés qui connaissent la valeur à saisir. 


Double-clic 


Le double-clic permet de déclencher une action associée à un objet particulier en 
« court-circuitant » certaines étapes intermédiaires. Cependant, il convient d'être 
vigilant sur le choix de son comportement. 


Le comportement associé à un double-clic doit être dans la lignée de celui du simple clic. 


Afin qu’il soit aisément assimilable, le comportement du double-clic doit être 
proche de celui du simple clic. La configuration idéale est que la commande déclenchée 
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par un double-clic soit celle qui le serait par deux simples clics consécutifs. Par exemple, 
quand un menu est affiché pour le simple clic, le double-clic revient à déclencher la 
commande associée à l'option par défaut de ce menu. 


Aucune fonction ne doit être déclenchée uniquement par un double-clic. 


Le double-clic n'est généralement pas facile à maîtriser pour les utilisateurs 
débutants. Il est donc déconseillé d'activer une commande uniquement de cette 
manière. Elle doit aussi l'être par un moyen moins rapide, mais plus simple, par 
exemple un bouton. 


De même, le clic maintenu n'est pas naturel pour un novice. Ces deux modes sont 
sources d'erreur en cas de stress. Des alternatives doivent être proposées, par le biais 
du clavier par exemple. 


Rollover 


Le rollover, ou surval, est un artifice graphique qui consiste à changer la représentation 
d'un visuel lorsque l'utilisateur passe la souris au-dessus. Ce comportement est 
généralement employé pour notifier à l'utilisateur qu’une interaction est possible à cet 
emplacement (ex. : accès à une information détaillée). 


Le rollover sert à mettre en évidence les boutons de navigation. 


Le rollover permet de fournir un retour aux actions de l'utilisateur en mettant 
en évidence l'objet qu'il désigne. Cet artifice graphique donne de l'interactivité à 
l'interface, que ce soit pour une application logicielle ou un site web. 


HTC Flyer Ca, c'est une idée! HTC Salsa HTC Incredible S 
Facebook ga seul un 
geste 


EN SAVOIR PLUS p 


Figure 4.8 — Le rofover sert ici à mettre en évidence le produit survolé, afficher un court résumé 
et donner accès au détail du produit. 


Utiliser le survol souris pour guider l'utilisateur. 


Le pointeur souris permet également d'afficher des informations complémentaires à 
l’objec survolé. Par exemple, l'affichage d'une bulle d'aide présentant une information 
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contextuelle pour aider l'utilisateur sans qu'il ne doive effectuer d'action spécifique 


(clic). 


PARTICULIERS 


PROFESSIONNELS 


# 


OLLECTIVITES 
Mele 1421 


DOCUMENTATION 


Figure 4.9 — Sur ce site, un rofover est utilisé pour décrire le contenu des rubriques. Mais ce 
comportement passe généralement inaperçu car lorsque le texte s'affiche en haut à droite, la zone 
d'attention de l'utilisateur est focalisée sur le pointeur souris, c'est-à-dire nettement en dessous. 


Toutefois, comme l'illustre la figure précédente, il est préférable de positionner 
l'information contextuelle au plus près de la zone activant le rollouer de manière à ce 
que l'utilisateur s'en aperçoive immédiatement. 


4.1.4 interaction tactile 


Déjà utilisées sur de petits écrans tels que pour les photocopieurs, les inreracrions 
tactiles sont apparues depuis quelques années. L'arrivée des smartphones d’abord à 
stylet puis sans a grandement favorisé son accès au grand public. 


Nous l'avons évoqué précédemment, les interfaces tactiles offrent des possibilités de 
manipulation directe des objets affichés sur un écran. Cetre manipulation d'éléments 
virtuels est une métaphore de la manière dont nous agissons avec les objets réels du 
monde physique. 


Limiter la durée des manipulations tactiles. 


L'apprentissage de ce type d'interaction est rapide. Toutefois, la précision des gestes 
effectués avec les doigts peut être assez soutenue, et peu répandue pour d'autres tâches 
de notre quotidien si ce n’est par exemple l’utilisation d'un instrument de musique. 
Alors que la main profite du poignet pour se reposer tout en manipulant une souris 
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ou un clavier, celle de l'utilisateur tactile ne dispose d'aucun support. Lorsque la 
manipulation est longue, la fatigue impacte autant la précision du geste que le confort 
d'utilisation de l'appareil. 


Le pointage au doigt 


Comme nous l'avons remarqué au chapitre 2, l'agencement des informations affecte 
l'interaction tactile. Un objet éloigné nécessite inévitablement un mouvement du 
doigt plus important. Pour un smartphone, les éléments actifs de l'interface doivent 
être facilement accessibles avec le pouce. 


Dimensionner les objets de manière à les rendre facilement sélectionnables au doigt. 


La sélection d'un élément d'une interface tactile semble plus naturelle qu'avec une 
souris. Toutefois, la largeur du pointeur (le doigt} étant plus conséquente, l'élément 
devra être sufhsamment grand pour que l'utilisateur contrôle visuellement la sélection 
à défaut d'une sensation physique : l'enfoncement du bouton de la souris. 


En dessous de 10mm pour une tablette et 8mm pour un smartphone, un objet 
interactif nécessite une précision du geste contraignante pour l'utilisateur, notamment 
si des éléments adjacents sont également cliquables. 


25 mm 


10 mm 8 mm 
Fonction Fonction Fonction Fonction Pointage 
d’accès rapide récurrente occasionnelle exceptionnelle précis 


Figure 4.10 — Dimensions conseillées des boutons pour une interface tactile 


Les gestes 


La manipulation directe au doigt offre potentiellement une multiplicité de modes 
d'interaction. 


En effet, grâce aux surfaces multitouch, l'interaction tactile ne se limite plus à un 
seul doigt. Il est possible de former des gestes que l’interface peut interpréter comme 
des commandes spécifiques. 


Limiter les gestes aux standards du multitouch 


Les gestes proposés par les interfaces tactiles constituent un nouveau langage, 
parfois éloigné de la gestuelle avec des objets réels. De ce fait, un apprentissage est 
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nécessaire pour les utiliser. Mis à part certains gestes devenus des standards, comme 
l'écartement des doigts pour zoomer, le nombre de gestes effectivement connus des 
utilisateurs reste pour l'instant relativement faible. 


M 


Appui court : Appui long : 
sélection actions contextuelles 


Ç NY 
KP 


Déplacement à deux doigts : Étirement à deux doigt : 
rotation zoomer 


Figure 4.11 — Les gestes utilisés proposés par Apple constituent aujourd'hui une référence en 
matière d'interaction tactile à un ou plusieurs doigts. || n'en demeure pas moins que tous ne sont 
pas connus des utilisateurs. 


Distinguer les commandes importantes par un geste demandant une certaine dextérité. 


Afin d'éviter de déclencher une commande importante inconsciemment, les 
actions importantes se distinguent des autres par un geste spécifique exigeant concen- 
tration et précision. Elles ne se limitent pas à un simple appui. Par exemple, sur 
l'iPhone, il faut « glisser » pour déverrouiller Le téléphone ou répondre à un appel. De 
cette manière une hiérarchie est établie entre les commandes simples déclenchées par 
un appui et les commandes importantes qui nécessitent un geste plus réfléchi. 


Demander confirmation des gestes déclenchant une opération difficilement réversible. 
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14:03 


dimanche 19 juin 


“til Orange F Q 


Alarme 


Rappel 


Figure 4.12 — Lorsque là sonnerie de l'alarme se déclenche, deux actions sont proposées à 
l'utilisateur : soit, lé rappel par un simple appui, soit l'arrêt de l'alarme, mais dans ce cas le geste 
(glisser) est plus précis. 


En règle générale, pour prévenir l'utilisateur des erreurs, les commandes difhcile- 
ment réversibles doivent être confirmées. À plus forte raison, lorsqu'il s'agit d’une 
commande déclenchée par un simple geste. En effet, le « défaire » (undo) n'est pas 
disponible sur tous les smartphones. Lorsqu'il existe son utilisation est limitée à 
certaines fonctionnalités et peu connue des utilisateurs, c’est le cas sur l'iPhone où 
secouer son téléphone permet d'annuler une saisie. 


La confirmation des commandes peut également se faire, comme sur une interface 
logicielle, en proposant une fenêtre de confirmation. Le principe étant de proposer 
une séquence d'interaction plus longue pour une commande sur laquelle il sera difficile 
de revenir par la suite. 


Proposer des raccourcis gestuels pour les utilisateurs avertis. 


Certains gestes peuvent être proposés comme des raccourcis d'une séquence plus 
longue. C’est le cas, par exemple, de la suppression d'un item d'une liste qui peut 
être déclenchée par un « glisser » au-dessus de l’item. De cette manière le geste 
permet d'éviter une série d'appuis simples qui peut être fastidieuse pour un utilisateur 
expérimenté. 


Cependant, dans ce cas, la confirmation doit apparaître dans la prolongation du 
geste de manière à demander un léger effort de concentration supplémentaire pour 
protéger l'utilisateur de l'erreur sans trop le gêner. 


4.1 interagir avec l'interface 


Supprimer le contact 


dernière étape avant une suppression définitive. 
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gauche à droite, puis appuyer sur le bouton « Supprimer » 


Figure 4.13 — Une boîte de dialogue demande la confirmation de l'effacement du contact, 


Figure 4.14 — La suppression d'un item de la liste se fait en deux temps : tout d'abord glisser de 
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4.2 LES ÉLÉMENTS D'INTERACTION 


Les éléments d'interaction sont les objets de l'interface sur lesquels l'utilisateur 
interagit. Trois types d'éléments d'interaction sont à distinguer : 


e Les éléments de commande, boutons et menus, permettent de déclencher un 
traitement applicatif. 

e Les éléments de sélection, bouton radio, case à cocher et liste, permettent à 
l'utilisateur d'indiquer ces choix. 

e Les éléments de saisie, champ de saisie et boîte de texte, servent à rentrer des 
données textuelles. 


4.2.1 Boutons 


Un bouton sert à déclencher une commande. Il est visible en permanence, il est donc 
accessible immédiatement par un seul clic de souris ou un appui au doigt. Il prend 
l'apparence grisée lorsqu'il est inactif. Son principal intérêt est de permettre un accès 


rapide aux commandes. 


Figure 4.15 — Bouton. 


Employer des boutons pour les commandes fréquemment utilisées. 


Le gain en rapidité qui résulte de l’utilisation d'un bouton est d'autant plus sensible 
que la commande est utilisée fréquemment. 


Préciser l'intitulé de la commande en toutes lettres dans l'étiquette du bouton. 


Il convient d'indiquer la fonctionnalité associée au bouton afin de guider l'utilisa- 
teur et lui permettre de prévoir les résultats de son action. Il est préférable de préciser 
explicitement ce que fait le bouton, par exemple Inorimer ou Ouvrir plutôt que 
d'employer un terme générique qui n’est généralement pas lu, comme Ok ou Va1ider, 
En outre, les libellés seront plus volontiers des verbes à l’infinitif, accompagnés 
éventuellement de substantif, afin que ces boutons de commande soient compris 
comme déclencheurs d'action. 


Préférer les boutons pour les interfaces tactiles. 


Du fait de sa simplicité de manipulation — il suffit d'appuyer pour déclencher la 
commande — les boutons seront utilisés en priorité sur les interfaces tactiles. 


Ordonner les boutons selon le système d'exploitation des postes utilisateur. 
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L'ordre des boutons dépend du système d'exploitation. Sur Windows, la commande 
qui engage le moins l'utilisateur (Annuler) est placée à droite, la commande d’action 
vient ensuite à sa gauche. Sur Mac OS, Les boutons sont alignés par ordre d'importance 
de la droite vers la gauche. Dans ce cas, la commande d'action se trouve donc à 
l'extrémité droite. Au contraire, sur Gnome (Linux), l’action « pasitive » est à droite 
et l’action « négative » à gauche. Malgré ces différences, des règles communes peuvent 
être identifiées : 


Aligner à droite les boutons de la fenêtre. 
Mettre le focus sur l'action la plus fréquente. 
Isoler à gauche les boutons agissant sur l’ensemble de la fenêtre. 


Aide Autre action Annuler 


Rechercher et remplacer 


|| Rechercher | Remgiacer | Attendre | 
action] 


Windows 


Aide Autre action Annuler 


_ Adobe Photoshop 


| Enregistrer les modifications du document Adobe Phatoshop “Sans 
titre-1" avant de quitter ? 


Ne pas enregistrer { Annuler { Enregistrer ) 


Mac OS 


Figure 4.16 — Agencement des boutons selon les systèmes d'exploitation 


Toute action doit pouvoir être annulée. 
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Afin de prévenir les erreurs et donner à l'ucilisateur la maîtrise du fonctionnement 
de l'application, il doit pouvoir revenir en arrière à tout moment. En aucune manière 
l'application ne doit conduire l'utilisateur sur une « impasse » l’obligeant à se servir du 
bouton « page précédente » ou à fermer la fenêtre. À côté de chaque bouton d'action, 
un bouton d'annulation doit donc être proposé. 


4.2.2 Menus 


Le rôle d'un menu est de présenter, de manière groupée, un ensemble de commandes. 
Il peut prendre deux formes. S'il apparaît au-dessus de l’objet de l'interface qui vienc 
d'être sélectionné, c’est un menu contextuel. Lorsqu'il est appelé depuis la barre de 
menu de la fenêtre, c'est un menu déroulant. 
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Figure 4.17 — Les menus. 


Menu déroulent 


En termes d'utilisabilité, les menus déroulants offrent différents avantages. D'une 
part, ils sont faciles à comprendre. Ils présentent au même niveau l’ensemble des 
commandes disponibles à un moment donné. Si certaines d'entre elles ne sont pas 
autorisées, elles apparaissent inactives, en grisé, dans le menu. Le fonctionnement de 
l'application est ainsi expliqué à l'utilisateur. D'autre part, les menus sont faciles à 
mémoriser, car l'utilisateur se souvient de la position de la commande dans le menu. 
Finalement, les erreurs sont moins nombreuses puisque la saisie est plus simple : une 
sélection à la souris. 


Les menus déroulants offrent l'intérêt d'être constamment accessibles depuis 
la barre de menu. La mémorisation est facilitée car l'utilisateur garde sous les 
yeux l'ensemble des en-têtes du menu. Par ailleurs, le comportement des menus 
déroulants permet de les passer rapidement en revue. L'utilisateur peut ainsi explorer 
les différentes fonctionnalités proposées. 


Toutefois, l'inconvénient du menu est son manque de rapidité. En effet, l'ouverture 
du menu, Le déplacement de la souris, puis la sélection de la commande prennent du 
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temps et nécessitent une certaine précision. De plus, le dialogue est ici contrôlé par 
le système, puisque l'utilisateur ne peut choisir que dans l'ensemble de commandes 
proposées par le menu. Par ailleurs, les menus sont inadaptés lorsque le nombre de 
choix est trop important. Finalement, la barre de menu prend de la place à l'écran, 
tandis que le menu lui-même peut masquer certains objets de l'interface. 


Peu rapides, les menus sont simples à utiliser et faciles à comprendre. Ils 
conviennent aux utilisateurs occasionnels ou débutants. 


Le principal intérêt des menus déroulants est de faciliter l'apprentissage du logiciel. 
Ils remplissent parfaitement ce rôle lorsque la tâche est bien structurée, Dans ce cas, il 
est possible d'associer aux différentes activités de l'utilisateur un menu ou une partie 
d’un menu. 


Ajuster la structure des menus à l'activité de l'utilisateur. 


Le menu guide l'emploi du système. L'utilisateur se repère facilement lorsque 
le fonctionnement du logiciel, représenté au travers de l'arborescence de menus, 
coïncide avec son activité. De cette manière, chaque menu fournit une réponse à la 
problématique de chaque opération. 


Müinimiser la taille des menus. 

Il est conseillé de ne pas dépasser 10 choix par menu lorsque les utilisateurs sont 
débutants. Le menu peut être plus long pour des utilisateurs expérimentés, jusqu’à 
20 éléments s’ils sont simples et qu’ils peuvent être groupés. Au-delà de ces valeurs, il 
convient de créer des sous-menus ou d’autres menus. Enfin, pour faciliter la sélection 
d'un item dans la liste affichée, il est souvent judicieux de regrouper les items par thème. 


Chaque groupe offre un ensemble d'actions possibles aux conséquences proches. 


Organiser le menu selon l’utilisation. 


L'organisation des menus s'appuie sur trois principes : 


e Séquentialité 


Les items apparaissent dans l'ordre dans lequel ils sont utilisés. 


e Fréquence d'usage 


Les items les plus fréquemment utilisés sont placés en haut du menu. 


e Importance 


Les items les plus importants sont placés en tête de liste ; les autres suivent par vrdre 
décroissant d'importance. 
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La façon d'ordonner les items doit être cohérente et rapidement comprise par 
l'utilisateur. 


Les commandes à effet difficilement réversible sont distinctement séparées des autres et 


placées en bas du menu. 


Sélectionner l'item voisin de celui qu’on voulait choisir est une erreur fréquente 
sur un menu. [Il faut absolument éviter que ce « voisin » ne soit destructeur par erreur. 
C'est pourquoi les commandes Effacer ou Quitter seront systématiquement séparées 
du reste du menu par un trait. 


Les commandes non disponibles s'affichent en grisé dans le menu. 


L'utilisateur comprend mieux le fonctionnement du système lorsque les commandes 
non disponibles s'affichent dans une couleur différente des autres. Il identifie et mémo- 
rise ainsi les fonctionnalités autorisées selon l’état du système. Lorsque l’utilisateur est 
plus expérimenté, il est envisageable de ne pas afficher les commandes non disponibles. 
La taille du menu est alors réduite, offrant de cette manière un gain en rapidité. Par 
contre, l'emplacement des items dans la liste peuvent varier en fonction de l'état du 
système, ce qui peut engendrer également des erreurs de sélection. 


Le titre de la fenêtre doit être cohérent avec l’item du menu. 


Le fait que le titre d’une fenêtre soit le même que le nom de l'item du menu qui à 
permis de l'ouvrir est un moyen de guidage qui concourt à faciliter l'apprentissage. 
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Figure 4,18 — Lorsque le titre de la fenêtre est cohérent avec l'item du menu correspondant, 
l'utilisateur établit le lien entre la sélection de la commande et l'affichage de la fenêtre. 
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Menu contextuel 


Le menu contextuel, appelé aussi pop-up menu, permet d'accéder directement à un 
ensemble de commandes. Il apparaît à l'endroit du clic sous le pointeur souris. Son 
contenu varie selon le composant sélectionné, voire selon l'état de l’objet. Il s'affiche 
classiquement en cliquant sur le bouton de droite de la souris (Windows) ou par une 
combinaison « Ctrl et clic » chez Apple. 
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Figure 4.19 — Le menu contextuel s'affiche après sélection et clic droit. 
Dans Microsoft Office, la partie haute du menu s'affiche seule lorsque la souris est déplacée en 
haut à droite après sélection. On retrouve ici une interaction gestuelle, mais à la souris. 


La commande déclenchée par le biais du menu contextuel s'applique à l'objet 
sélectionné. C'est le principe de la manipulation directe : l’utilisateur agit directement 
sur l'objet qu'il sélectionne. 


Utiliser un menu contextuel pour les commandes rapides et fréquentes nécessitant de 
maintenir l'attention sur la zone de travail. 


L'intérêt du menu contextuel est de minimiser les actions utilisateur et les 
déplacements de la souris. Il présente à côté de l’objet sélectionné la liste des actions 
possibles. Activer une commande par le menu contextuel évite de déplacer le pointeur 
à l’autre bout de l'écran pour ouvrir un menu déroulant ou pour cliquer sur un bouton. 
L'utilisateur conserve l’objet dans son champ de vision et maintient son attention sur 
la zone de travail. 


Le menu contextuel est un bon moyen d'économiser de la place dans un écran 
chargé. Cependant, dans la plupart des cas, rien n’indique à l'utilisateur qu'un clic 
droit lui permettra d'ouvrir un menu contextuel. 
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Les menus contextuels sont à éviter pour des commandes occasionnelles. 


En effet, les menus contextuels vont nécessiter un certain apprentissage. Ils sont 
généralement appréciés par les utilisateurs expérimentés. Par contre, il est conseillé de 
fournir un autre mode d'accès pour les débutants (ex. bouton d'action, menu déroulant). 


Afficher les menus contextuels tactiles au-dessus du point d'appui. 


Contrairement au pointeur de la souris, le doigt masque l'écran des interfaces 
tactiles. Dans la mesure du possible, le menu contextuel doit donc s'afficher au-dessus 
du point d'appui. 


Figure 4.20 — Au moment où il appuie sur la zone du haut, l'utilisateur ne voit pas le menu 
contextuel {"Coller"} car il est caché par son doigt. 


Menu en ruban 


Apparu dans la suite Microsoft Office 2007, le menu en ruban (ribbon), permet 
d'afficher des listes de commandes regroupées par thème ou contexte d'utilisation. 
Chaque groupe de commandes est accessible sous un onglet. Le ruban offre l'avantage 
de rendre rapidement accessible un nombre conséquent de commandes sous forme de 
boutons ou de listes déroulantes, en profitant d'une hauteur suffisante pour des icônes 
explicites accompagnés éventuellement d'un libellé. 
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Figure 4.21 — Le ruban fournit un accès rapide à un grand nombre de commandes. 


Les éléments d'interaction sont présentés dans le ruban sous une taille différente en 
fonction de leur fréquence d'utilisation. Les icônes les plus grandes, les plus facilement 
accessibles, correspondent aux commandes les plus fréquentes. 


Privilégier le ruban pour des applications utilisées fréquemment. 


Contrairement aux menus déroulants, le ruban nécessite un certain apprentissage 
des icônes et de l’organisation des onglets. Néanmoins, une fois passée cette phase 
d'apprentissage, le gain en efficacité est sensible car les commandes sont disponibles 
immédiatement et beaucoup plus rapidement qu'avec des menus déroulants. Afin de tirer 
un véritable bénéfice du ruban, il est donc nécessaire d'utiliser fréquemment l'application. 


Regrouper les commandes du ruban en fonction de la tâche de l'utilisateur. 


Un menu en ruban permet de retrouver rapidement la commande souhaitée à 
condition qu'il ait été conçu en cohérence avec la tâche des utilisateurs. Pour cela, un 
travail d'architecture de l'information doit permettre de construire les regroupements 
en s'appuyant sur les fonctionnalités de l’application et en conduisant des séances de 
« tri par carte » afin de valider l’organisation auprès des utilisateurs finaux. 


Adapter Le contenu du ruban en fonction de sa taille. 


Le ruban est un élément de commande à « géométrie variable ». Lorsqu'il est réduit, 
seules les commandes les plus importantes apparaissent. L'objectif est de toujours 
permettre un accès direct aux commandes les plus importantes, bien que la taille de la 
fenêtre soit réduite. 


Le dimensionnement du ruban doit garantir un accès rapide aux commandes les plus 
fréquentes. 


En fait, chaque groupe de composants dispose de plusieurs formes d'affichage de 
taille différente (quatre au total). Lorsque la taille du ruban diminue, les groupes 
contenant des commandes moins fréquentes (ou moins connues) diminuent plus 
rapidement que les groupes dont les commandes sont utilisées plus fréquemment. 
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Figure 4,22 — Le contenu du ruban s'adapte à la taille de la fenêtre de manière à toujours 
fournir un accès rapide aux commandes importantes. 


Dans un groupe de commandes, la taille de l’icône est proportionnelle à l'importance 
de la fonction. Les icônes les plus grandes (32 X 32 pixels) correspondent aux commandes 
les plus fréquentes, randis que les autres commandes sont présentées par des icônes plus 
petites (16 x 16 pixels). Les petites icônes sont accompagnées d'un libellé affiché à droite. 
Ce libellé s'efface lorsque le ruban est réduit. Toutefois, les commandes les plus connues 
(ou les plus fréquentes) perdent leurs libellés avant les autres. 


Ce sont ces comportements qui rendent le ruban Office facile à utiliser. Le gain en 
rapidité dont bénéficient les utilisateurs réguliers d'Office n’est pas uniquement la consé- 
quence d’un changement de présentation, mais bien le résultat d'un ensemble d'interactions 
cohérent visant à accélérer l'accès aux commandes les plus fréquemment utilisées. 


Lors de la conception d'une interface, la question se pose fréquemment de savoir s’il 
convient de choisir un menu ou un bouton. La figure suivante fournit des critères de choix. 


Conserver l'attention | Visibilité Commandes Place Utilisateur 
sur la zone de travail constante fréquentes réduite débutant 
Bouton © © 
Menu contextuel Q @ © 
Menu déroulant © © 


Figure 4.23 — Critères de choix entre un bouton et un menu. 
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La principale différence entre le menu et le bouton est son caractère éphémère ; 
il n'apparaît que sur action de l'utilisateur et disparaît dès sélection d’un item. Les 
menus sont donc particulièrement utiles lorsque l'écran est chargé. 


4.2.3 Éléments de sélection 


Différents éléments vont permettre de choisir parmi un ensemble de données : les 
boutons de sélection, que l’on appelle boutons radio ou case à cocher, la liste 
déroulante et la liste simple. 
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Figure 4.24 — Le nombre de choix possibles et la place libre à l'écran 
sont les principaux critères de choix d'un composant de sélection. 


Présenter verticalement les composants de sélection. 


Il est préférable de disposer les éléments de choix verticalement afin de réduire 
le temps de recherche en minimisant les mouvements oculaires effectués lors de la 
comparaison. 


Cases à cocher et boutons radio 


Utiliser les boutons de sélection pour des choix fréquents et peu nombreux. 


Le principal intérêt du bouton de sélection (bouton radio ou case à cocher) est le 
fait qu’il offre un accès direct aux différents choix et qu'il reste visible en permanence. 
En contrepartie, il occupe de la place à l'écran. 


Préférer les boutons aux listes déroulantes. 


Lorsque le nombre d’items de la liste est faible, il est préférable de les afficher 
directement, avec des cases à cocher ou des boutons radio. Lorsque la liste dépasse les 
3-4 items ou que la place est limitée, la liste déroulante est mieux appropriée. 


En outre, l’utilisation de boutons est une manière efficace de faciliter la sélection 
d'un item. Tous les items étant visibles, utilisateur économise un clic et surtout gagne 
en précision, car l’item à sélectionner est statique. 
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Liste déroulante 


La liste déroulante permet de guider l'utilisateur dans la saisie. 


La liste déroulante facilite la saisie en proposant à l'utilisateur de choisir parmi les 
différentes valeurs possibles. C’est un moyen efficace pour guider l'utilisateur dans la 
saisie, Il lui suffit de reconnaître la valeur souhaitée, il n'a pas besoin de se souvenir de 
l'intitulé exact. Grâce à la liste déroulante, il n'est plus nécessaire de saisir au clavier, 
il suffi de sélectionner la valeur souhaitée. En limitant la frappe, ce composant réduit 
le risque d'erreur. 


La liste prend peu de place et permer de présenter de nombreuses options. Pour 
gagner de l'espace sur une page, c'est un composant très pratique. De ce fait, elle 
est parfois utilisée pour « cacher » de longues listes particulièrement difficiles à 
manipuler... 


Employer une liste déroulante lorsque la place est réduite et les choix peu fréquents. 


La liste déroulante peut contenir de nombreux choix. Mais ils sont d'un accès 
moins direct que les boutons de sélection (deux clics au lieu d’un seul). Cependant, la 
liste présente l'avantage d'occuper moins de place à l'écran. 


Utiliser la liste déroulante lorsque l'ensemble des choix possibles est variable. 


Ce composant d'interface est particulièrement utile lorsque le contenu de la liste 
est variable, c'est-à-dire qu’il peut évoluer au cours de l’utilisation de l'application. En 
effet, la liste déroulante occupera toujours la même place à l'écran quel que soit son 
contenu. 


Ne pas utiliser une liste déroulante pour une information connue de l'utilisateur. 


La manipulation des listes déroulantes est délicate, surtout lorsque la liste est 
longue et qu'il faut se servir de la barre de défilement. Les listes de sélection sont 
généralement sources d'erreur. En particulier, il arrive fréquemment que l'utilisateur 
change la valeur de la liste sans s'en apercevoir, en voulant descendre dans la page 
avec la molette de la souris. Ce type d'erreur a été observé à de nombreuses reprises. 
C'est pourquoi, lorsque l'information est connue de l’utilisateur (par exemple, son 
année de naissance), il est préférable d'employer un champ de saisie plutôt qu’une 
liste déroulante. 


Qui plus est, les intitulés des listes ne sont pas toujours explicites. Les tests nous 
montrent que l'internaute pense parfois que le champ a déjà été rempli. L'intitulé 
par défaut doit donc être suffisamment clair pour que l'utilisateur comprenne l'action 
attendue. 


Organiser les items par ordre alphabétique ou selon la logique de l'utilisateur. 
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La recherche dans la liste est rendue difficile par les barres de défilement. Elle prend 
généralement du temps. Pour être efficace, l'utilisateur doit comprendre rapidement la 
façon dont la liste est organisée. Par défaut, il est toujours conseillé de classer les items 
par ordre alphabétique. C’est l’ordre le plus attendu dans une liste d'items. Toutefois, 
la signification des items peut induire un ordre logique différent : (ex. : Très fréquent, 
Fréquent, Peu fréquent). En outre, il peut être judicieux de mixer ces deux approches 
pour limiter le parcours fastidieux d’une longue liste, notamment en proposant d'abord 
les items les plus fréquents ou les plus attendus, puis une liste alphabétique. 


Devise de départ : 

Q Rechercher. , 
M Euro EUR - 
® Dollar américain ÿ USD 
18 Royaume Uni - Livre GBP 
1-1 Canada - Dollar CAD 
Australe - Dollar AUD 
A 

© Afghanistan - Afghani AFN 
Æ2 Afghanistan - Afghani* AFA 
& Afrique du Sud - Rand ZAR 
ER Albanie - Lek ALE 

& Agérie - Dinar D2D 
2 Allemagne - Mark” OEM 


Figure 4,25 — Sur cette liste, les devises les plus courantes sont proposées en premier, puis une 
liste complète des devises par ordre alphabétique est présentée en dessous. 


La figure 4.26 résume les différents critères de choix d’un composant de sélection. 


Jusqu'à Jusqu'à Place Plus de ou 
. S-6choix | 1042choix | réduite | 12choix | Peer 
= Bouton de sélection © 
: Liste déroulante Lu] © © 
Liste © © 


D Figure 4.26 — Choix des composants de sélection. 


4.2.4 Champs de saisie 


Fréquemment utilisés sur le web, les formulaires font peur à l'internaute qui les voit 
parfois comme une sorte d'épreuve. En effet, jusqu’à présent, sur les autres pages du 
site, il était consommateur d’information ; ici il devient fournisseur. D'une certaine 
manière, il prend plus de risques. L'enjeu est important car Le passage du formulaire lui 
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permet généralement de concrétiser une série d'opérations qui, pour l'instant, étaient 
restées virtuelles. C’est typiquement le cas lorsqu'il s’agit de fournir les renseignements 
finalisant un achat en ligne. 

Face au formulaire, il y a peu de marge d'erreur. Sur les autres pages du site, 
l'internaute pouvait facilement revenir en arrière. Ici, il se lance dans un processus 
long où il est plus difficile de corriger les erreurs. 

Finalement, contrairement au reste du site où il se sert de la souris, il doit 
maintenant utiliser le clavier ; dispositif dont il n'a pas toujours la maîtrise et avec 
lequel les erreurs sont plus fréquentes. 

La page de formulaire demande à l'utilisateur une attention et une dextérité 
inhabituelle par rapport au reste du site. C’est généralement une source de stress. 


Proposer par défaut la valeur la plus courante. 
Guider l'ucilisateur dans la saisie. 
Limiter les saisies au strict nécessaire. 


Lors d'un achat en ligne, on recense une proportion importante d’abandons 
au moment du remplissage des formulaires de paiement. Effectivement, remplir un 
formulaire est une opération délicate. Plus le formulaire est court er plus l'utilisateur 
comprend la nécessité de fournir les informations demandées, plus il a de chances de 
mener la tâche jusqu’au bout. Sinon, il risque fort d'abandonner et de quitter le site. 


Le champ de saisie permet à l'utilisateur de fournir des informations au logiciel. 
Lorsqu'il remplit un champ de saisie, l'utilisateur se focalise sur cette petite zone de 
l'écran. I] convient donc d’être attentif à placer dans cet espace réduit toutes les 
données nécessaires à une saisie correcte. 


Nom : Milaneau 


Prénom : | Mar! 


Figure 4.27 — Champs de saisie. 


Choisir les libellés les plus courts possible. 


Le texte de l'étiquette est généralement un compromis entre la compréhensibilité 
du mot et sa longueur. 


Donner une longueur appropriée aux champs 
La longueur du champ de saisie guide l'utilisateur sur le type de donnée attendue. 


Par ailleurs, elle doit aussi permettre une relecture aisée de la saisie sans devoir se 
servir des flèches du clavier pour faire défiler le contenu. 
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Présenter les champs de saisie de façon cohérente par rapport aux autres supports de 
travail. 


L'utilisateur commet moins d'erreurs lorsqu'il retrouve sur l'interface un arrange- 
ment qui lui est familier. 


Nom: | 


Code postal: |_ ] Prénom : [7] nom: [7] 
Ville : { | Rue : | | 


Prénom : | | Code postal: [___] vite: [7] 


Rue : 


Déconseillé Préférable 


Figure 4.28 — Un agencement habituel des champs de saisie réduit le risque d'erreur. 


Proposer par défaut la valeur la plus courante. 


La saisie nécessite une certaine habitude du clavier, surtout s'il s'agit d'une interface 
tactile. Elle est souvent perçue comme une activité fastidieuse à plus forte raison quand 
elle est répétitive. Il est donc recommandé de pré-remplir le champ avec la valeur la 
plus fréquente ou bien la dernière valeur saisie. Éventuellement, une liste historique 
peut aussi donner accès à l'ensemble des dernières saisies. 


stupeflip 

stupeur et trembiements 
stupeflip the hypnoflip invasion 
stupid story 


ATOCUOO0 


Figure 4.29 — L'historique et l’autocomplétion évitent de réitérer les saisies. 
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Prévenir des erreurs de saisie. 


Les saisies au clavier sont sources d'erreur. Il est préférable d'éviter Les saisies mixtes 
majuscules et minuscules ou lettres et chiffres, ainsi que les saisies inutiles, comme un 
zéro en tête de chiffre. 


JeanValmi / Ca nom a l'air bien 

jeanvalmi&superweb.com X Ça n'a l'air d'un 8-mail valide. 

(11117112 . . Le not de passe pourrait ètre plus 
sécurisé. 

JValmi Ce nom d'utilisateur est disponible, 


Figure 4.30 — Les champs sont contrôlés au fur et à mesure de la saisie 


Expliciter la nature de l'erreur. 


Afin de faciliter la correction, un texte court à proximité de la zone d'erreur doit 
permettre à l'utilisateur de comprendre la nature de l'erreur et lui donner les moyens 
de la corriger facilement. 


Il est préférable de contrôler les erreurs en deux temps. Tout d'abord, un premier 
contrôle de surface permet de vérifier le contenu des champs au fur et à mesure de la 
saisie. Ensuite, un second contrôle est effectué globalement sur l'ensemble des champs 
lorsque le contenu a été transmis à l'application. 


Ne pas bloquer l'utilisateur. 


Tant que la saisie n'a pas été validée, il est préférable d'indiquer l'erreur par un 
changement de présentation et un message à côté de l’élément concerné, tout en 
laissant l'utilisateur continuer sa saisie. De cette manière, l'utilisateur garde le contrôle 
de l’interaction et peut revenir corriger l'erreur ensuite. 


Laisser l'utilisateur choisir les unités. 


La saisie est plus facile lorsque l'utilisateur travaille selon ses habitudes ; il commet 
moins d'erreurs et apprend plus facilement. 
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Taille de l'image 


—— Dimensions de pixel :5,39 Mo 


Largeur : 2454 pels + Je 
ÿ 


Hauteur : 768 pixels + 


Taille du document : 
Largeur : 86,57 
Hauteur : 27,09 


Résolution : 72 


Mettre les styles à l'échell 
[V] Conserver les proportions points 
[V|Rééchantilonnage : picas 


Bicubique (adapté aux dégradés lisses) 


Figure 4.31 — Des erreurs sont évitées lorsque l'utilisateur choisit 
lui-même les unités. 


Préciser le format de la saisie. 


Selon les cas, on indiquera, si nécessaire, les unités, la syntaxe ou le nombre de 
caractères maximum du champ. 


Email: 
ex: pat@example.com 


Figure 4.32 — Les indications guident l'utilisateur dans la saisie. 


Préférer un sélecteur dédié pour les saisies complexes. 


Il'est toujours préférable de réduire la saisie au strict nécessaire. C’est pourquoi, 
lorsque la saisie est complexe, il est recommandé de proposer une interaction par 
sélection plutôt qu'une saisie de caractères. Par exemple, un calendrier permet de 
saisir une date par simple sélection, réduisant ainsi le risque d'erreur. 
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USE 02/08/2011 + 


4 Août 2011 


11 12 13 14 
15 16 17 18 19 20 21 
22 23 24 25 26 27 28 
29 30 31 


Aujourd'hui 


Figure 4.33 — Le calendrier facilite la saisie des dates 


Saisies obligatoires et facultatives 


Indiquer les entrées obligatoires. 


Une manière de réduire la charge de saisie est d’indiquer explicitement les données 
requises, c'est-à-dire celles dont l’absence va générer une erreur et donc une perte de 
temps. 


L'astérisque (*) est le signe le plus fréquemment employé pour signaler les 
champs dont la saisie est obligatoire. Les internautes reconnaissent maintenant cette 
convention. Il est toutefois prudent d'en rappeler la signification sur la page afin d’être 
facilement compris des internautes débutants. 


Indiquer également les saisies facultatives. 


Préciser également les champs facultatifs de ceux qui sont obligatoires aide 
utilisateur à comprendre le fonctionnement de l'application et lui évite des erreurs. 
Afin d'éviter des saisies inutiles, notons toutefois qu’il est préférable de réduire le 
nombre de champs optionnels. 


Dans la mesure du possible, ne présenter que des champs obligatoires. 


Dans un souci d'efficacité, il est préférable de concevoir des formulaires où tous 
les champs sont obligatoires. Dans ce cas, seules les informations véritablement 
importantes sont demandées à l'utilisateur. Il n’est plus nécessaire de préciser les 
champs obligatoires, une indication en débuc de formulaire spécifiant que tous les 
champs sont requis est suffisante. 
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PHILIPS I ARE 
sense and simplicity Enragiatres un produt / Connaxian Réchérches > 
* Produts grand pubbt : Boutique on bgne Phips ? Santé * Étlaupoe D» Assistance » Éntropnso 1 Dretég » (nvactbsseurs 


Envoyer un e-mail 


Obtenez Es réponse à vos questions par €-nat bu par Diléphane 


w Votre question Confirmation 


Produit Les diéments marqués d'un actéraque (*) bleu sont ohbgainirer. 


SI vatre question 9 trou à un predunt 196c/faue, ndbquez le Mumtéro de moddle et la date d'athat. 


Catégorie de produit Téié,|seur (plasma, LEO] 
Puméro de modbia 


Date d'achat ! mat ‘ année 


Numéro do sén6 


Votre question 


“Vatra question  Susisser votre commentaire ia. 


Figure 4.34 — Pour qu'un formulaire puisse effectivement permettre de recueillir les 
commentaires des visiteurs du site, il doit être suffisamment simple pour que là saisie se fasse 
rapidement. 


Alignement des zones de saisie 


Lors de la conception d’une interface homme-machine, la question se pose fréquem- 
ment de savoir comment aligner les libellés et les zones de saisie. Il existe trois types 
d'alignements, chacun ayant ses avantages et ses inconvénients. 


De préférence, afficher les éléments du formulaire sous les libellés. 


L'alignement vertical est celui qui minimise les risques d'erreur puisque les éléments 
de saisie s'affichent directement en dessous de leur libellé, dans le sens de la lecture. 
Lorsque la place est suffisante, cet agencement doit être préféré en particulier pour des 
saisies occasionnelles. 


Sur les interfaces tactiles, cet alignement permet de ne pas masquer le libellé avec 
le doigr ou lorsque le système zoome automatiquement sur Le champ à remplir. 


À noter également que ce type d'agencement facilite de façon notable la traduction 
de l'interface puisque la taille des libellés est peu contrainte. 
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Fonction : 


Numéro de téléphone : 


ss 


Préférable 


Figure 4.35 — Alignement vertical. 


Lorsque l'espace vertical est limité, préférer l'alignement à droite. 


Mis à part son esthétique, c’est l'agencement le plus efhcace en termes de saisie. Il 
est recommandé pour une application professionnelle où généralement l'utilisateur ne 
lit pas les libellés car il les connaît. Par contre, il pourra relire rapidement les données 
une fois sa saisie effectuée car elles apparaissent ici directement les unes au-dessus des 
autres. 


Nom : | 
Fonction : | : | 
Numéro de téléphone : | = h | 


Préférable 


Figure 4.36 — Alignement à droite. 


Lorsque les libellés des champs sont alignés à gauche, la distance entre les libellés 
et la zone de saisie correspondante peut être conséquente. Les mouvements oculaires 
sont importants. Des erreurs de parallaxe sont à craindre. 


Cette présentation rend la lecture des libellés plus facile (alignés à gauche dans 
le sens de la lecture), mais l'association est moins claire entre libellé et champ. S'il 
est possible d'uniformiser la taille des libellés, l'alignement à gauche de l'ensemble 
facilitera la lecture ainsi que la saisie. Dans ce cas, la distance étant réduite, les risques 
de confusion sont moindres. 
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Norn : 
Fonction : | 


Nurnéro de téléphone : | _| 


Déconseillé 


Figure 4.37 — Alignement à gauche. 


Saisie clavier 


Accélérer la saisie clavier. 


Dans la mesure du possible, l'interface doit aptimiser autant que possible la 
saisie clavier qui, pour la plupart des utilisateurs, est une activité consommatrice 
en ressources. Pour cela, lorsqu'une fenêtre contenant une zone de saisie s'affiche, il 
est préférable de positionner directement le curseur dans le premier champ à saisir. 


De même à la fin de la saisie, la validation du formulaire doit pouvoir se faire 
directement en appuyant sur la touche « Entrée », sans obliger l’ucilisateur à valider 
en cliquant sur un bouton. 


Faire correspondre le déplacement par tabulation avec l'ordre des champs. 


Beaucoup d'utilisateurs interagissent avec un formulaire par le biais de la tabulation 
(touche À). Le parcours des champs de saisie avec la touche de tabulation doit donc 
correspondre à l'ordre de saisie des champs, ainsi qu'au sens de lecture de la fenêtre. 


Hiérarchie des actions 


Dans une zone de dialogue, toutes les actions ne sont pas égales, par exemple : modifier, 
annuler ou revenir en arrière sont des actions secondaires, tandis que sauvegarder, 
continuer ou valider sont des actions primaires qui permettent de réaliser une étape 
de la tâche. 


Mettre en évidence les actions primaires. 


Les actions primaires sont directement responsables de la complétion du formulaire. 
Elles conduisent l'utilisateur vers son objectif et le guide dans les différentes étapes de 
sa tâche. La présentation visuelle de ces actions doit refléter leur importance. 


Aligner les actions primaires dans le sens de l'interaction. 
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amazonfr 
nr” ANVCAUL ADANES ARTICLES 

Destinataire : aConiin 
Usabilis LL Comioue à 
168 avenue jean jaurès 
Montrouge, 92120 
France 
| Modifies 

Articles Quantité 

Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur 1 

- Nogier, Jean-François 

EUR 33,25 : En stock 

État : Heuf - Nouveau 

Vendu par : Amazon EU S.a.cl. 

Supprimer | 
Sivaus avez modifié une quantité, cliquez sur !-Metire à jais | 
Pour supprimer un article, mettre 0 en quantité et cliquer sur « Mettre à jour ». {Continuer @ 


$i vous souhaitez utiliser un chèque-cadeau ou un bon de réduction, le code de ce chèque ou de ce bon vous sera demandé au 
moment da payec 
Un problèrne en cours de commande ? Notre Service Client est là pour vous aides Contpctaz-nous. 


£onditong générales devants | Yog informations carsonnellas | © 1996-2011, Amazon.com, Inc. 


Figure 4.38 — Sur cette page de la descente d'achat, l'action primaire (Continuer) est mise en 
évidence, tandis que les actions secondaires (Modifier, Supprimer, Mettre à jour) apparaissent en 
retrait. 


Afin d'optimiser le processus de saisie, les boutons d'action principaux sont 
positionnés dans le sens de saisie, c'est-à-dire dans le sens de lecture de l'interface. 


OMonsieur (Madame, Mlle 


Prénom [Jules | 


Nom 
Votre Email 


Mot de passe 


Je m'inscris 


Figure 4.39 — Le bouton « Je m'inscris » est l'élément terminal de là séquence de saisie. 
Il s'affiche dans l'alignement des champs de saisie. 
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4.3 TEMPS DE RÉPONSE 


4.3.1 L’attente pour l'utilisateur 


Le temps de réponse, que l'on appelle attente lorsqu'on prend le point de vue 
de l'utilisateur, mesure le temps qui s'écoule entre l'envoi d’une commande par 
l'utilisateur et la réponse du système informatique. 


Plus précisément, le temps qui importe à l'utilisateur est le temps global de 
réalisation de la tâche. II diffère de ce que les informaticiens appellent le temps de 
réponse qui est le temps mis par le système pour afficher un résultat. En effet, le temps 
de réalisation d’une tâche correspond pour l'utilisateur à un cumul du temps : 


+ Le temps de réponse du système. 
e Le délai d'affichage. 


e Le cemps qui lui est nécessaire pour lire, puis comprendre et interpréter la 
réponse. 

+ Le temps mis pour décider et mettre en œuvre les actions consécutives à cette 
réponse 


e Eventuellement le temps perdu par erreur. 
e Le temps mis pour corriger ces erreurs. 


C’est en réduisant ces différentes durées que l'on diminuera effectivement le temps 
de réponse aux yeux de l'utilisateur. 


Le temps de réponse influe sur l’utilisabilité du logiciel de deux manières. D'une 
part, c'est un facteur de stress. L'anxiété de l'utilisateur augmente lorsque le temps 
de réponse s’allonge ec qu'aucun affichage ne l'informe des traitements en cours. Des 
études ont montré que, dans une conversation humaine, une attente de plus de deux 
secondes donne à l'incerlocuteur l'impression d'attendre. 


D'autre part, le temps de réponse alourdit la charge de travail, car il oblige 
l'utilisateur à faire des efforts pour conserver en mémaire les informations nécessaires 
pour continuer l'échange. Dans le cerveau humain, les informations se maintiennent 
en mémoire à court terme pendant une durée de 2 à 6 secondes. Au-delà, les 
mécanismes de mémorisation sont plus complexes et les informations risquent d'être 
oubliées ou remplacées par d’autres. 


L'appréciation du temps de réponse est subjective. Elle dépend en particulier du 
niveau d'expertise de l'utilisateur. Ainsi, un débutant accepte des temps de réponse 
plus importants lorsqu'il est assisté. Il préfère un système facile à apprendre, même s’il 
est plus lent. Au contraire, l’utilisateur expérimenté accepte un système plus complexe, 
s'il est plus rapide. Il importe donc d'établir un compromis entre le temps de réponse 
du système et la facilité d'apprentissage offerte par le logiciel. 


L'utilisateur adapte sa stratégie d'utilisation aux temps de réponse du système et à 
la facilité de correction des erreurs. Lorsque le temps de réponse est faible et que les 
erreurs sont faciles à corriger, l'utilisateur adopte une stratégie de type essai/erreur. II 
réfléchit peu et commet des erreurs. Le stress est peu important. Au contraire, lorsque 
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le temps de réponse est important et que les erreurs sont difficiles à corriger, le temps 
de réflexion est plus important. Lutilisateur commet moins d'erreurs, mais le stress est 
plus important. 


4,3.2 Minimiser l'attente 


Comme nous venons de le voir, lorsque le cemps de réponse est prévisible, l'utilisateur 
adapte sa stratégie d'utilisation. 


Minimiser les variations du temps de réponse. 
Rendre les sources de variation visibles. 


Lorsque les sources de variation sont visibles, l'utilisateur peut comprendre, et 
donc prédire, le comportement du système. Par exemple, il est recommandé d'afficher 
le nombre d'utilisateurs connectés lorsque celui-ci influence le temps de réponse. 


Le comportement de l'interface doit donc rendre compte du temps de réponse 
prévisible. 


Quel que soit le temps d'attente prévisible, l’objet sur lequel porte l’action doit changer de 
présentation. 


Ainsi, l'utilisateur perçoit immédiatement que son action a été prise en compte par 
le système. Ceci évite qu'il réitère la manipulation, pensant à un problème mécanique. 


Au-delà de 2 secondes, il y a un risque de perte d'information en mémoire à court 
terme. Il est donc recommandé d'éviter que le temps de réponse entre deux étapes 
intermédiaires d'une tâche ne dépasse les 2 secondes. 


Si l’attente est estimée comprise entre 2 et 6 secondes, une icône d'attente doit être 
affichée. 


Figure 4.40 — Lorsque le traitement est de courte durée, 
une icône animée suffit pour avertir l'utilisateur. 


Si l'attente est estimée supérieure à 6 secondes, un message doit préciser l'avancement du 
traitement en cours. 
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Un temps de réponse plus long, supérieur à 6 secondes, est acceptable dans la 
mesure où l'opération en cours ne demande pas de mémorisation, à condition toutefois 
d'avertir l'utilisateur par un message. Pour cela, les messages d'avancement peuvent 
suivre le schéma de la figure 4.41. 


Avancement du traitement 


Description du traitement en cours et des objets concernés 
80% | 


alisée : 160MB sur 200 MB 
t-8 minutes 
Temps total : 56 minutes 


Annuler 


Figure 4.41 — Pour un traitement long, il est conseillé de fournir à l'utilisateur 
des éléments à la fois quantitatifs et qualitatifs afin qu'il puisse en mesurer l'avancement. 


La fenêtre d'avancement permet à l'utilisateur d'estimer le temps d'attente et de 
connaître l'état d'avancement du traitement par rapport au processus complet. Ce 
message doit être rafraîchi régulièrement afin de montrer qu'un traitement est en cours. 
Une animation montre l’avancement du traitement en cours. Dans le cas des processus 
longs (plusieurs minutes), un message peut également préciser le type d'activité en 
cours. 


Autoriser l'utilisateur à interrompre les traitements longs. 


Afin qu'il garde le contrôle sur les opérations réalisées par le logiciel, l’utilisateur 
doit, à tout moment, pouvoir interrompre un traitement en cours. 


Les attentes locales sont préférables aux attentes globales. 


+ En règle générale, deux niveaux d’atrente sont à prendre en compte : soir l’attente 
est globale au poste de travail, soit elle est locale à une fenêtre de l'écran. Lorsque 
l'attente est globale, aucune interaction n'est possible. L'utilisateur « n'a plus la main ». 
Dans la mesure du possible, cette situation doit être évitée : l'attente ne doit pas 
empêcher l'utilisateur d'interagir avec le système. Il est préférable d'opter, lorsque la 
chose est possible, pour une attente locale où seules les interactions avec la fenêtre 
concernée sont interdites, Le reste de l'interface restant accessible à l'utilisateur. 
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4.4 CAS PRATIQUE : CHARTE ERGONOMIQUE 


ET REFONTE GRAPHIQUE DU PROGICIEL SAB 


4.4.1 Une démarche ergonomique pour garantir la qualité 


Le progiciel SAB est une solution informatique intégrée dédiée au domaine bancaire. 
Il adresse principalement les secteurs de la banque de détail et de la banque privée ainsi 
que celui de la conservation des titres. Les différents modules constitutifs du produit 
SAB permettent d'offrir différentes solutions métier aux établissements financiers, tels 
que le crédit aux particuliers ou aux entreprises, les paiements bancaires, la gestion 
des citres, le e-banking, la comptabilité ainsi que le reporting bancaire et analytique. 


Courant 2010, une nouvelle version du poste bancaire destinée aux utilisateurs 
front-office a été mise en œuvre. Dans le cadre de la conception de ce nouveau 
poste de travail, SAB a souhaité fournir aux équipes de développement une charte 
ergonomique afin de guider et homogénéiser l’ensemble des développements pour 
s'assurer de la cohérence des différentes interfaces. 


Afin de l'accompagner sur ce projet, SAB nous à demandé de l'assister dans la 
rédaction de la charte ergonomique et dans la définition d'une charte graphique 
globale pour les différents modules du progiciel. 


4.4.2 Préciser les règles d'ergonomie 


Une équipe a été constituée afin de rédiger une charte ergonomique et valider que 
le fait cette charte soit bien respectée dans les différents projets contribuant à la 
réalisation de la nouvelle version du produit. 


La prernière version de la charte ergonomique fournissait des principes généraux 
que nous avons précisés en fonction des exigences métiers et des contraintes du produit 
en collaboration avec l'équipe SAB. 


À l'issue de cette phase d'échange, la charte ergonomique fournissait un ensemble 
de recommandations sur les règles à suivre pour concevoir les écrans ainsi que des 
agencements types pour les fonctionnalités les plus fréquemment employées dans le 
logiciel. 


Nous avons complété cette première version, principalement ergonomique, en 
construisant une charte graphique pour le progiciel, garantissant ainsi une cohérence 
forte de l'ensemble. 


4.4.3 Refondre le graphisme de l'interface 


Le design de l'interface précédente n'avait pas été travaillé graphiquement. Bien que 
les fonctionnalités du produit soient fortement appréciées par les clients, l'interface 
n'était pas suffisamment élaborée et en rapport avec les meilleures pratiques de 
présentation. 


4.4 Cos pratique : charte ergonomique et refonte graphique du progiciel SAB 
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Figure 4.42 — L'interface du produit SAB avant l'intervention ergonornique 


4.4.4 Un design moderne et sobre 


Il était donc important de rénover cette interface pour répondre aux exigences 
d'ergonomie actuelles, tout en respectant les qualités qui font la force du progiciel 
SAB : productivité et simplicité d'utilisation. 


La piste graphique choisie par SAB met en avant l’aspect modulaire des applica- 
tions. Les zones de travail et de navigation sont posées sur un fond dégradé pour les 
faire ressortir et les différencier. Cette mise en forme de type « conteneurs » favorise 
la mémorisation de l'emplacement des fonctions à l'écran. 


Les différents blocs sont traités avec un léger effet de relief pour les présenter 
en avant-plan tout en minimisant la charge visuelle. Une variation de gris donne la 
ronalité globale de l'écran, le vert est la couleur ronique qui vient rehausser l'ensemble. 
Elle est utilisée pour mettre en évidence les éléments clés de la page : citre et sous-titres, 
bouton principal, étape courante, etc. 
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Figure 4.43 — La nouvelle interface du progiciel 


4.4.5 Une utilisation dans le monde entier 


La mise en œuvre de la nouvelle charte ergonomique a permis de renforcer l'attrait 
du produit en contribuant à l'harmonisation des interfaces, à la fois en termes de 
graphisme et d’ergonomie. 


L'application de la charte a permis de gagner du temps lors des développements, dès 
la phase de conception car les équipes disposent de patterns répondant aux différentes 
problématiques de présentation, puis en phase d'implémentation en s'appuyant sur des 
composants techniques qui aident à la construction des pages en conformité avec la 
charte. Finalement la nouvelle ergonomie et le nouveau graphisme ont été accueillis 
très positivement par les équipes de développement et les utilisareurs. 


Le progiciel SAB est utilisé par des établissements bancaires dans le monde entier. 


Au total, ce sont 15 000 urilisateurs qui se servent quotidiennement des applications 
SAB. 


4.4 Cas pratique : charte ergonomique et refonte graphique du progiciel SAB 1] 


« Précédemment à l'intervention ergonomique nous avions dégagé les grandes 
problématiques de présentation et de navigation à traiter. Nous souhaïitions pour apporter 
les meilleures réponses à ces problématiques bénéficier d'une expertise. Par ailleurs 
nous considérions que la déclinaison d'une charte graphique relevait d'une compétence 
métier dédiée. 

Nous avons été séduits par l'approche ergonomique. Nous avons pu en commun ajuster 
la démarche proposée au regard de nos attentes. 

La présentation des valeurs qui caractérisent l'entreprise et ses produits ont fait l'objet de 
propositions de pistes graphiques. L'application du visuel retenu sur quelques-unes de 
nos transactions majeures a confirmé la pertinence des propositions élaborées. 

Les contraintes de présentation et de navigation ont été ensuite revues dans le détail 
pour apporter des solutions répondant aux meilleures pratiques. Le retour d'expérience 
apporté par les consultants a permis à nos équipes de capitaliser sur les bonnes pratiques 
et d'être en capacité de justifier les choix retenus. 

Ces travaux ont permis de dégager la charte graphique et ergonomique. Celle-ci 
est devenue la référence pour nos outils de maquettage et notre framework de 
développement. 

Le résultat obtenu est totalement satisfaisant, il est un des éléments majeurs de la 
nouvelle version du progiciel SAB Advanced Technology. » 


Olivier GASCOIN 
Chef de produit SAB 
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« Le langage de l'ordinateur ne doit pas seulement exprimer les tâches de l'utilisateur et répondre 
à ses questions, il doit également être en harmonie avec les processus humains de mémorisation et 
de compréhension. » 

Ben Schneiderman!, Designing the User Interface, Addison- Wesley, 2002. 


5.1 Le langage de l'interface 
5.2 Internationalisation des interfaces .......................... ass 
5,3 Traitement des erreurs... ce. a 


5.4 Aide et assistance à l'utilisateur 


5.5 Cas pratique : BCA Expertise, impliquer les utilisateurs pour garantir la qualité de 175 
l'expertise 


LE LANGAGE DE L'INTERFACE 


Le langage de l'interface homme-machine constitue la base même du dialogue entre 
l'utilisateur et l'application. Des textes simples, non ambigus, facilitent l'apprentissage 
et la mémorisation. Ils en garantissent une compréhension correcte. 


1. Ben Shneiderrman est professeur au département des sciences informatiques, directeur fondateur 
du laboratoire d'interaction Homme-Machine, et membre de l'institut pour les écudes informatiques 
avancées, à l'université du Maryland, College Park. 


Chapitre 5. Communiquer avec l'utilisateur 


Employer le langage de l'utilisateur. 


Lorsque le langage utilisé est connu de l'utilisateur, qu'il lui est familier, il n’a pas à 
traduire les termes de l'interface. La compréhension est plus rapide. 


Q Pour les messages qui contiennent des caractères 8 bits, utiliser le codage MIME 


‘quoted printable'. Laisser l'option désactivée pour envoyer les messages tels 
quels, 


Figure 5.1 — Déconseillé - Pour la plupart des utilisateurs, ce texte est incompréhensible 
car il emploie un vocabulaire trop spécialisé. 


5.1.1 Libellé des commandes 


Un texte est plus explicite qu'une icône pour désigner une commande. Cependant, il 
prend généralement plus de place à l'écran et présente l'inconvénient d'être dépendant 
de la langue. 


Un seul et unique libellé pour chaque commande. 


Le nom utilisé pour chacune des commandes et chacun des éléments de l'interface 
doit être cohérent sur toute l'application. 


Utiliser une syntaxe homogène pour le libellé des commandes. 


Il convienc en particulier de distinguer par la syntaxe les commandes, les objets 
ou les états de l'application. C’est pourquoi on utilisera de préférence des verbes à 
l'infinitif pour désigner les commandes, voire un verbe suivi d’un substantif s'il est 
nécessaire d'être plus précis. Au contraire, on emploiera des subsrantifs pour nommer 
les états er les objets de l'interface. 


Éviter les verbes à la forme nominale. 


L'utilisation d’un verbe à la forme nominale induit une confusion entre action 
et état. Par exemple, la commande Affichase va-t-elle déclencher un processus 
d'affichage (action) ou présenter les paramètres courants d'affichage (état) ? 


Éviter les abréviations. 


Les abréviations sont source d’ambiguïté et nécessitent un effort de mémorisation. 
Dans la mesure du possible, il est préférable d'employer les mots complets à moins 
qu'il ne s'agisse d’une abréviation familière à l'utilisateur. 


5.1 Le langage de l'interface 


s| 


Cependant, lorsqu'on ne peut pas faire autrement, il convient d'adopter une règle 
de construction simple et homogène pour les abréviations. La figure 5.2 présente 
différentes techniques d'abréviation. [Il est recommandé de terminer l’abréviation par 
un point afin de montrer que le mot a été coupé. 


Règle Mot Abréviation 
Troncature Rotation Rotat. 
Premières lettres du mot Rotation Rot. 
Effacement des voyelles Rotation Rttn 
initiales du mot Rotation vers la droite RD 
Premières lettres et initiales Rotation vers la droite RotD 
Effacement des voyelles et troncature Rotation Rtt. 


Figure 5.2 — Règles de construction des abréviations. 


Lorsque les abréviations sont lisibles, les expérimentations ont montré qu'elles 
étaient mémorisées plus facilement [Mayhew 92]. La taille influence également la 
mémorisation : plus le code est court (4 à 5 caractères), plus il est facile à mémoriser. 
De plus, l'homogénéité des abréviations, le suivi d’une même règle de construction, 
rendent l'apprentissage plus aisé. Néanmoins, il importe avant tout de vérifier (par un 
test) que les abréviations sont correctement comprises par l'utilisateur. 


5.1.2 Messages 


Les messages permettent au système de communiquer explicitement avec l’utilisateur 
soit pour le questionner afin de déterminer les actions à venir, soit pour expliquer un 
fonctionnement. 


Définir le rôle et le contenu des différents types de messages de façon homogène. 


Afin de garantir la cohérence de l'interface, il convient de mettre en place une 
typologie claire des différents types de messages : message d'erreur, message de demande 
de confirmation, message d'information, etc. et d'associer à chacun d’entre eux un 
gabarit de fenêtre ainsi qu'un contenu type. 


Employer une fenêtre de message lorsqu'on veut que le message soit lu. 


L'affichage d’une fenêtre de message, la nécessité de la fermer et le fait qu'elle 
masque une partie de la zone de travail, risquent de perturber l'utilisateur. Il convient 
d’en réserver l’usage pour les informations importantes. 
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Afficher le message près de l'objet auquel il est lié. 


Dans la mesure du possible, le message doit apparaître près de l'endroit où 
l'utilisateur est censé regarder, c'est-à-dire près de la zone de l'écran sur laquelle il 
attend une modification suite à la commande. 


Un message dont la forme ne correspond pas au contenu sème le doute dans l'esprit 
de l'utilisateur, comme le montre la figure 5.3. 


déconseillé 
Figure 5.3 — Lorsque la présentation (ici l'icône) ne correspond pas au contenu, lé message est 


arnbiqgu. 


Rédaction des messages 


La rédaction du message doit suivre différentes règles visant à faciliter la compréhen- 
sion et éviter les ambiguïtés. 


Microsoft Access 


déconseillé 


Figure 5.4 — Ce message inutile, et long, à serné le doute chez de nombreux utilisateurs avant 
d'être retiré du logiciel. 


Produire des messages brefs, concis et pertinents. 


Afin de minimiser le travail de lecture, il importe que le message soit court pour 
être lu rapidement et sans ambiguïté. En effet, plus les informations sont nombreuses, 


5.1 Le langage de l'interface 


Œ 


plus le risque de confusion est grand. Le contenu du message doit donc être réduit à 
l'essentiel, c'est-à-dire aux seules informations pertinentes pour l'utilisateur. 


Suite à votre demande d'impression, 25 pages | . 
: As PE 25 pages imprimées. 
du document loremipsum ont été imprimées. 


a. Déconseillé b. Préférable 


Figure 5.5 — Dans le message (a), l'information attendue par l'utilisateur, l'avancement de la tâche 
d'impression, est perdue dans le texte, au contraire du message (b) où elle apparäît clairement. 


Produire des messages clairs, adaptés au niveau de connaissance de l'utilisateur. 


Lorsque l'utilisateur est expérimenté, qu'il se sert fréquemment du logiciel, le 
message indique uniquement la syntaxe de la commande, tandis qu'il précisera sa 
sémantique aux utilisateurs débutants ou dans le cas d'une utilisation occasionnelle. 


Utilisateur expérimenté 

Erreur : La quantité doit être inférieur à 10. 
Valeur quantité erronée, Utilisateur débutant 

Erreur : La quantité doit être inférieur à 10, 

au-delà de 10 utilisez la rubrique Grandes 

commandes, 


Déconseillé Préférable 


Figure 5.6 — Le message doit être adapté aux connaissances de l'utilisateur. 


Construire des messages affirmauifs. 


La forme affirmative est moins ambiguë et plus rapide à comprendre que la tournure 
négative qui prête à confusion. 


Vous ne pouvez pas quitter avant de 
P ea Sauvegardez votre session avant de quitter. 


sauvegarder votre session 


Déconseillé Préférable 


Figure 5.7 — La forme affirmative est plus simple à comprendre. 


Employer la forme active. 
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De même, la forme active est plus directe et plus facile à interpréter que le passif. 


La grille des programmes est à afficher après Pour afficher la grille des programmes, 
avoir sélectionné là chaîne TY. sélectionnez là chaîne TV correspondante. 
Déconseillé Préférable 


Figure 5.8 — La forme active est moins ambiguë. 


Produire des messages constructifs et non critiques. 


Les messages doivent permettre à l’utilisateur de comprendre son erreur. 


Enregistrer sous. 


maquette/finale 
Le nom de fichier n'est pas valide, | maquétts 
CosneNNe fichiers 
— 


Un nom de fichier ne peut pas contenir les caractères suvants : 
\{i2"«2] 


Déconseillé Préférable 


Figure 5.9 — Lorsque le message apporte des éléments d'explication, 
il est plus facile à comprendre. 


Éviter les impasses. 


Le message doit être constructif et indiquer à l’utilisateur la marche à suivre. Il 
participe ainsi à son apprentissage. 


Ses toire codé Saisissez votre code puis 


appuyez sur Validation. 
Déconseillé Préférable 


Figure 5.10 — Le message doit expliquer le mode opératoire 
et ainsi apprendre à l'utilisateur à se servir du logiciel. 


En particulier, lorsqu'une action est requise, le message doit expliciter l’action 
attendue de la part de l'utilisateur. 


Respecter l’ordre dans lequel les actions doivent être exécutées. 


5.1 Le langage de l'interface 


CD-ROM non détecté 


ë à 


Le CD-ROM ne se trouve pas dans le lecteur. 


Veuillez cliquer sur «Fermer et introduire le 
CD-ROM dans le lecteur. 


Figure 5.11 — Ce message précise clairement la cause du problème, mais il n'indique que 
partiellement la façon d'y remédier. Une fois le CD-ROM dans le lecteur, que doit faire l'utilisateur ? 


L'ordre dans lequel les actions sont exprimées dans le message doit être cohérent 
avec la façon dont elles doivent être réalisées sur l'application. 


Pour accéder à ce document vous devrez insérer 
le CD-ROM : ”’ehm cd-2” après avoir cliqué sur OK. 


Figure 5,12 — Déconseillé —- Ce message, où les actions à réaliser sont présentées dans l'ordre 
inverse d'exécution, a été source de nombreuses erreurs. 


À la lecture du message précédent, l'utilisateur est tenté d'insérer le CD-ROM et 
cliquer sur OK, alors qu'il lui est demandé de faire l'inverse pour que la commande 


s'exécute correctement. Un libellé du type « Pour accéder à ce document, cliquer sur 
OK puis insérer le CD-ROM ehmcd-2 » aurait évité de nombreuses erreurs. 


9 Insertion du CD-ROM 


Insèrez le CD-ROM/DYD-ROM de l'Encyclopédie Encarta 
et chquez sur OK. 


x 


Parcourir... 


Figure 5.13 — Préférable - Les actions demandées à l'utilisateur sont ici présentées dans 
l'ordre dans lequel elles doivent être réalisées. Qui plus est, la fenêtre de message reste affichée 
tout au long de l'interaction évitant à l'utilisateur de devoir mémoriser la procédure. 


Adopter un vocabulaire homogène. 
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La cohérence des termes utilisés sur l'interface facilite sa compréhension et son 
apprentissage. Afin d'être plus explicite, il est préférable d'utiliser toujours les mêmes 
termes quitte à répéter certains mots. Pour cela, un glossaire du vocabulaire utilisé 
dans l'interface doit être défini et mis à jour au cours du projet. 


Pour afficher les chaînes, Pour afficher les chaînes T4, 

sélectionner la page Chaînes. sélectionner Chaînes. 

Pour visualiser les Paur visualiser les 

programmes des stations TY, programmes TV, 

activer Programmes. sélectionner Programmes. 
Déconseillé Préférable 


Figure 5.14 — Un vocabulaire homogène facilite la compréhension. 


Rester cohérent avec le reste de l'interface. 


Lorsqu'une action est requise, il convient de s'assurer de l'adéquation entre le 
terme utilisé et l’action utilisateur attendue. Ainsi, le terme 1apez peut être parfois 
ambigu, comme le montre la figure 5.15. 


Message | Action attendue 
Saisissez votre code Saisie clavier 
Appuyez sur Enter Appui sur uné touche 
Tapez Enter Appui ou saisie ? 


Figure 5,15 — Le dernier message est ambigu car il ne précise pas l'action attendue par le logiciel 


Pour conclure, rappelons que la typographie peut aussi permettre une lecture 
rapide du message. Urilisée à bon escient, elle facilite grandement la lecture, comme 
le montre la figure 5.16. 


Appuyer sur F1 pour afficher Appuyer sur F1 pour afficher 
l'aide et sur F5 pour rafraîchir l'aide et sur FS pour rafraîchir 
l'image. l’image 

Déconseillé Préférable 


Figure 5.16 — Une typographie adaptée facilite la lecture des messages. 


5.1 Le langage de l'interface 


5.1.3 L'écriture web 


Les internautes se servent du web pour gagner du temps. Ils ne lisent pas les pages 
mot à mot, ils les « balayent » en diagonale à la recherche de ce qui les intéresse 
[Nielsen 97]. Qui plus est, la lecture sur écran est difficile. Elle est plus lente que sur 
papier. Le contenu de la page doit donc être rédigé de manière différente. 


Les points clés d'une rédaction efficace 


L'objectif de la rédaction sur le web n'est pas de faire de la littérature, mais de présenter 
rapidement l’information importante, pour que l'internaute trouve directement la 
réponse aux questions qu'il se pose. La structure classique « introduction, développe- 
ment, conclusion » est à oublier ; d'autres techniques rédactionnelles doivent aussi 
être exploitées afin de tirer parti des avantages de la navigation hypertextuelle. 


Aller à l'essentiel : être concis. 


En éliminant le superflu, la lecture est plus rapide. Seules les informations 
pertinentes sont présentées. L'internaute perd moins de temps. On considère habituel- 
lement qu'un texte sur écran doit compter deux fois moins de mots que sur papier 


[Nielsen 98]. 
Rédiger simplement. 


Le texte est plus facile à comprendre lorsqu'il est rédigé clairement, avec des 
phrases simples : affirmatives, à la forme active et sans subordonnées. Les règles de 
base d’une rédaction simple sont applicables à la page web : développer une idée par 
paragraphe, faire des paragraphes courts (10 lignes au maximum) et réduire le nombre 
de paragraphes par page (3 ou 4 au maximum). 


Etre objectif : énoncer des faits, du concret. 


Il est recommandé d'éviter le langage marketing : pour que le visiteur reste, il faut 
gagner sa confiance. Il est déconseillé d'employer des termes trop sophistiqués. Les 
utilisateurs balayent les pages rapidement et risquent de ne pas saisir les nuances. En 
particulier les métaphores peuvent être mal interprétées par les internautes qui les 
comprennent parfois au premier degré. 


Commencer par la conclusion. 


Un texte pour le web doit être écrit « à l'envers ». Pour que l'utilisateur accède 
directement à l'information importante, le texte commence par la conclusion. ]l donne 
ensuite les éléments qui ont permis d'aboutir à cette conclusion. C'est le principe 
de la pyramide inversée [Nielsen 96]. L'objectif est le même que celui de l'écriture 
journalistique : fournir l'information importante le plus rapidement possible. 
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Structurer l'accès aux informations. 


Dans le même ordre d'idée, l'information est présentée de manière structurée : 
les points principaux dans un premier temps, les détails ensuite si l'utilisateur les 
demande. De cette manière, l'internaute accède rapidement à l'information utile, puis 
il continue la lecture des points pour lesquels il souhaite des compléments. 


Le contenu de chaque page doit être auto-suffisant. 


Lorsque l'internaute arrive sur l'une des pages d’un site, il n'a pas nécessairement 
parcouru les autres. Chaque page doit donc constituer un ensemble d'informations 
cohérentes pouvant être lues indépendamment du reste. 


Lorsque des informations complémentaires sont nécessaires, la page fournit des 
liens permettant à l'internaute d'acquérir Les connaissances qui lui manquent. 


Le eye tracking face aux méthodes ergonomiques 1/2 : Ce 
que le regard nous dit 


Les tests oculométriques {ou eye tracking) ont le vent en poupe dans 
le domaine du web. Mais sont-ils réellement utiles et efficaces ? 
Quelles sont les différences entre le eye tracking et les autres 
méthodes d'évaluation plus classiques comme le rest d'utilisabilité 
ou l’audit ergonomique ? [...] 


Lire la suite > 


Figure 5.17 — Les informations sont présentées en deux temps : 
un résumé d'abord, les détails ensuite. 


Publier des informations utiles. 


Plutôt que de publier des pages vides ou incomplètes, il est préférable de ne rien 
publier du tout. Il vaut mieux attendre que le contenu du site puisse apporter quelque 
chose à l'utilisateur plutôt que d'afficher du contenu qui ne lui sera d'aucune utilité. 
Surtout ne pas préciser qu'une page est « en construction » : l'internaute s’en aperçoit 
tout seul ! 


Principe de la pyramide inversée 


Le titre doit décrire explicitement le contenu de la page ou du paragraphe. 


Le titre des pages est un élément essentiel de l'utilisabilité d'un site. Son rôle est 
double. Il doit à la fois permettre à l'internaute d'identifier rapidement le contenu de 
la page et l'aider à vérifier qu'il est bien arrivé sur la page qu'il souhaitait atteindre. Il 
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est également conseillé, dans un souci de cohérence, de veiller à ce que le titre de la 
page se retrouve également dans la barre de titre de la fenêtre du navigateur. 


Le titre est un repère visuel important. Il doit donc être vu dès l'ouverture de la 
page. Pour cela, il est préférable de le placer en haut à gauche afin qu'il soit lu en 
premier. Une présentation graphique spécifique permet de le distinguer du texte de la 


page. 

Ce principe s'applique également aux titres de paragraphe (sous-titres). Lorsque 
l'utilisateur parcourt la page, les sous-titres lui servent à localiser la section contenant 
les informations qu'il cherche. Le sous-titre doit donc indiquer explicitement le 
contenu du paragraphe correspondant. 


Faire ressortir les éléments clés du texte. 


La typographie des messages importants doit « accrocher » l'œil. Sur une page web, 
deux techniques sont particulièrement efficaces : mettre en gras et utiliser les puces. 


La graisse des caractères permet de faire ressortir un mot dans une phrase. Les listes 
à puces vont servir à mettre en évidence une série de points clés. Éventuellement, la 
couleur peut aussi être utilisée pour signaler certains mots. Cependant, du fait qu’elle 
apporte une connotation sémantique supplémentaire, elle risque d'être moins bien 
comprise. 


Jakob Nietsen's Alertbox for October 1, 1997 %*'"« 2% 


How Users Read on the Web 


They don't. 


People rarely read Web pages word by word; instead, they scan the page, pitking out individual 


words and sentences. In research on how peoole read websites we found that 79 percent of our 
test users always scanned any new page they came across; only 16 percent read word-by-word, 


(Update: a newer study found that ysers read email newsletters even more abruptly than they 
read websites.) 


As a result, Web pages have to employ scannabie text, using 


« highlighted keywords {hypertext links serve as one Form of highlighting; typeface variations 
and color are others) 

+ meaningful sub-headings {not “clever" ones) 

«+ bulleted lists 

+ one idea per paragraph (users will skip over any additional ideas if they are not caught by 
the first few words in the paragraph) 

« the inverted pyrarnid style, Starting with the conclusion 

+ half the word count {or less) than conventional writing 


We found that credibility is important for Web users, since it is unclear who is behind 
information on the Web and whether a page can be trusted. Credibility can be increased by high- 
quality graphics, good writing, and use of outbound hypertext links. Links to other sites show 
that the authors have done their homework and are not afraid to let readers visit other sites. 


Figure 5.18 — Les articles du site de J. Nielsen (useit.com) sont d'excellents exemples d'écriture 
web. Chacun commence par un résumé synthétisant les points forts de l'article, ici l'information 
principale (79 % des internautes survolent la page plus qu'ils ne la lisent) apparaît en 1" ligne. Les 
idées clés sont mises en évidence en gras. La structure du texte s'appuie sur les titres et des listes à 
puces. Notons égalernent les libellés des liens qui indiquent la page vers laquelle ils pointent : ici 
inverted pyramid dirige l'internaute vers l'article intitulé /nverted pyrarnids in cyberspace. 


Chapitre 5. Communiquer avec l'utilisateur 


Le texte du lien doit être cohérent avec le titre de la page. 


Le texte des liens est systématiquement lu car l'internaute ÿ cherche des éléments 
lui permettant de se diriger dans le site. À la lecture du lien, l'utilisateur doit pouvoir 
deviner le contenu de la page. Le mieux est d'utiliser directement le titre de la page 
comme texte du lien afin de rassurer l'utilisateur sur l'endroit où il va arriver 


Les liens doivent pointer vers des éléments complémentaires. 


Le lien doit être conçu comme un moyen d'accéder à des informations complé- 
mentaires au contenu de la page. L'idée est de mettre en avant les conclusions et de 
fournir des liens vers les détails. 


LUHELLJ 


| ABOUT Î WRITINGS Ï PRESENTATIONS 
IDERTION + DESIGN 


Touch Gesture Reference Guide 


The Touch Gesture Reference Guide is a unique set of resources for 
software designers and developers working on touch-based user 
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interfaces. 
Ralatad: 
Apal 22,207 The guide contains: 1) an overview of 
Breuueq Devesagment _ the core gestures used for most touch 
Rey Ton M touch gosture soterence que (] commands 2) how to utilize these 
April 22,200 Major User Antions gestures 10 support major user actions 
Bros Devéaumert pa ds 3) visual representations of each 
CZ . ASE TON 

naduminotitnsimnn _— _ _ gesture to use In design documentation 
February 26 2011 coms fr Ds ame me me and deiiverables 4) an outline of how 
os nues KL popular software platforms support core 

— Ti esse touch gestures (below). 

4 

Hore on: ES (Ce nr ren — Download 
bb V9 EC Touch Gesture Reference Guide 

CAMGT ANATES ATOS 
MIN ILE, PROD _ ‘ = = For wireframes and mock-ups: 

Py-CLRS EEE Visuels only (PDF) 

>= 78 Visuals only (EPS) 
6 uosens te Mens O7 === Visuels only (OmniGraffle Stencil) 
{ES Puruw on Twater Le Visuels only (Visio Stencils) 
How to Guide (Visio) 
RME ass 


Touch Resources 
Touch Target Sizes: outlines recommended touch target sires from Apple, Microsoft, 
Nokia, and acadernic research. 


Touch Gesture Diagrams: listing of touch gesture disgrams that illustrate how users 
© interact with multitouch interfaces. Some can aisa be used in design 
documentation. 


Touch Interface Growth: details how Many touch-based devices are being shipped to 
consumers each year. 


Figure 5.19 — La navigation web se prête bien à ce type de cheminement où l'internaute 
explore librement le site en fonction de ses thèmes d'intérêt. Ainsi, dans cet article intitulé Fouch 
Gesture Reference Guide, linternaute possède un accès à d'autres ressources directement liées. 


5.1 Le langage de f'interfece 


Justifier les textes à gauche. 


La lecture est plus simple lorsque le texte est justifié à gauche, car l’œil retrouve 
rapidement le début de la ligne. 


Ne bas souligner les textes. 


Cette règle peut sembler évidente. Mais elle mérite toutefois d'être rappelée car 
on rencontre encore souvent ce problème. En effet, le soulignement est utilisé sur le 
papier pour mettre en évidence certains mots. Par contre sur une page web, cet artifice 
typographique a une autre signification : il signale un lien. 


Il ne faut pas souligner du rexte dans une page web. Du point de vue de l'utilisateur, 
c'est un peu comme si on cherchait à lui tendre en piège ; lui faisant prendre pour un 
lien ce qui n'en est pas. 


Vous n'avez pos de Lenonse nous celle rechescle a l'identique, 


Maus pouvez lier ue netvèlle leche Che ou demandes me çeches che d'amtériorsés 
auprés de l'INPI 


Nom de |a marque : 


Saisissez les mots essentiets Esobiis : 


Limitation de la recharcha 
à une ou plusieurs classes : 


Î at Uste des classes 


FW Toutes les classes 


@ EFFACER Lancer la recherche @ 


Figure 5.20 — En haut de cette page, le soulignement sert à mettre en évidence le message. 
Mais l'internaute croit qu'il s'agit d'un lien conduisant vers une page permettant de déclencher 
l'action proposée (« demander une recherche d'antériorité »}. Il clique dessus. En vain, rien ne se 
passe : ce n'est que du texte | 


Permettre à l'utilisateur d'imprimer le texte. 


La lecture sur écran n’est pas facile. En outre, elle ne permet pas d'annoter le texte 
au fur et à mesure, contrairement au papier. Dans de nombreux cas, l'internaute préfère 
imprimer la page pour la lire. Pour les rubriques destinées à être lues, des descriptifs 
techniques par exemple, il est conseillé de prévoir une version imprimable. 


La présentation à l'écran étant généralement différente de celle sur papier, il est 
recommandé de définir au préalable l'apparence des pages imprimées, en particulier 
lorsqu'il s'agit d'une information importante, voire contractuelle, comme un bon de 
commande par exemple. 


Chapitre 5. Communiquer avec l'utilisateur 


Vérifier l'efficacité rédactionnelle 


La check-list suivante permet de vérifier que touces les informations nécessaires à la 


compréhension apparaissent bien dans la page (elle porte le nom mnémonique de 
QQOQCP : initiales des six questions). 


Check-list de vérification du contenu d'une page 


Qui a écrit la page ? À qui s'adresse-t-elle ? 

Que contient la page ? 

Où ? Information de lieu, si nécessaire. 

Quand ? Date de mise à jour ou autre information de temps, si nécessaire. 

Comment ? Comment fonctionne la page ? (ex. : Mode d'emploi d'un service en ligne). 
Pourquoi ? Quel est l'objectif de la page ? 


5.2 INTERNATIONALISATION DES INTERFACES 


Lorsque la vocation d'une application est internationale, se pose la question de la 
« localisation », c'est-à-dire la manière de traduire l'interface pour qu’elle soit compré- 
hensible sans ambiguïté par un utilisateur étranger. C'est une problématique à laquelle 
sont confrontés la plupart des sites web qui visent une audience internationale. 


5.2.1 La page d'accueil 


Comme nous l'avons vu précédemment, la page d'entrée sur un sire web doit permettre 
à l'internaute de comprendre la vocation de ce site. La page d'accueil doit donc 
s'adresser au visiteur dans sa langue. 


Diriger l'internaute vers la page d'accueil qui est dans sa langue. 


À son arrivée sur le site, l'internaute doit être automatiquement dirigé vers 
la version du site correspondant à sa localisation géographique ou à la langue du 
navigateur qu'il utilise. 


Dans la mesure du possible, le processus de détection ci-dessous doit être mis en 
œuvre : 


e Si la zone géographique, détectée par le biais de l'adresse IP, correspond à la 
langue du navigateur de l'utilisateur, l'internaute est redirigé automatiquement 
vers la version du site pour ce pays/langue. 

e Si la zone géographique détectée ne correspond pas à la langue du navigateur, 
le site affiche une fenêtre de sélection de la langue. En effet, il peut s'agir, par 
exemple, d’un touriste coréen qui se sert de son ordinateur à Paris. 

+ Finalement, lorsque la position géographique ne peut pas être détectée ou 
qu'une ambigüité existe (ex: en Belgique, entre le français et Le flamand), il est 
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préférable de demander à l'internaute de choisir la version du site qu’il préfère 
utiliser. 


sHoes.com 


Welcome Intemational customers. 
We're excited to share our great shoes with 
the worid! 


Choose your country for shipping and your 
billing currency to customize your shoe- 
Shopping experiènce. 


Salect country to ship to: Select currency for billing: 
CRAN +) (Riu 4) 


Or continue shopping the U.S. site RME 


Figure 5.21 — Exemple de redirection vers la version nationale : avant de rediriger l'internaute 
étranger vers la page de son pays, ce site lui demande dé préciser le pays de livraison ainsi que là 
devise afin que les informations soient affichées en conséquence. 


Laisser l'internaute choisir sa page nationale 


Lorsqu'il n'est pas nécessaire de rediriger automatiquement l'intemaute, il est préférable 
de le laisser choisir lui-même la version du site qu'il souhaite visiter. Dans ce cas, les 
paramètres précédents (localisation de l'adresse IP et langue du navigateur) sont utilisés 
pour inciter l'utilisateur à visiter la version du site correspondante. 


amazoncom Hello. Sign.m to get nersonsized recommendalions. New customer? Start here 


Your Amazon.com oday's Deals |: Gifta & Wian Liata : Gift Care 


Ahop AN Dapearére nie | Search ET Departrents 


Untimited instant Videos > 


MP3s 8 PA > rie depuis la France? à [] Essayez f 
L {142 , ») uw LLE LU dé 
Amazon Cloud Dev amazon!ir 
5 GA attee ps A > À } Giiquez.id 
Kindla > 
Avpstore for Android —_ 


Figure 5.22 — Le site Amazon.com propose à l'utilisateur situé en France d'accéder à Amazon.fr. 
Notons que le message placé ici en haut de page peut être identifié par certains internautes 
comme une publicité (phénomène du banner blindness). 
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Chapitre 5. Communiquer avec l'utilisateur 


5.2.2 Choisir sa langue 
Permettre à l'utilisateur de changer facilement de langue. 


Sur un site international, l'utilisateur doit facilement pouvoir passer d’une version 
(langue) du site à une autre et ce sur toutes les pages car il peut être arrivé sur le site 
par une page étrangère, suite à une requête à un moteur de recherche. C'est pourquoi, 
le changement de langue/version se trouve en général dans la partie supérieure droite 
de la page, dans la zone « Utilitaires ». 


PHILIPS BU francs } françois À 
sense and aimplécity Enregatrer un produt / Coñnean Œ  Gions/ srgren Î 
Argects À Espoñol 


Bague j Maréelane 


Se | 
D oo /ra 
1 


Figure 5.23 — Le changement de langue est placé en haut à droite de la page. Il est accessible 
depuis toutes les pages du site. 


Ernployer la langue cible ou un drapeau pour le lien vers la version/langue correspondant. 


Par exemple, sur la version anglaise, le lien vers la version française s'intitulera 
« français » et non « french ». D'autre part, lorsque de nombreuses langues sont 
disponibles, le drapeau facilite la sélection (guidage visuel). 


5.2.3 Traduction 


La traduction du contenu est une étape incontournable de la conception d'un site 
international. La qualité de cette traduction est essentielle car elle va garantir la 
bonne compréhension du site par ses visiteurs étrangers. 


Il est préférable de ne pas traduire plutôt que de prendre le risque d'une mauvaise 
traduction. 


Une traduction approximative, comportant des fautes d'orthographe ou de gram- 
maire, induit une méfiance chez les internautes. Le site n'est pas pris au sérieux, 
certains visiteurs se posent la question de sa légitimité (« est-ce le vrai site ou une 
copie ? >). 
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ght : 


Copyri 


Airica 


Œ_ Argens Franc 

 Aroom/Porrquese 

B GaomiFroncr 

_ Beatrwans / Engiisn 

D Gurine F200 / Fronch 

A Gurundi/ Eranch 

M Cameroon! French 

ee Capa Varda ; Portquess 

2 Central Ace Republic / French 
Chad French 

> Comoroa s Froncn 

PA Conso /Frunch 

AR Cote Dore: Froncr 

#4 OR Congo Frenct 


Asia - pacific 


@ Auovaln : Engin 

CB China! ChmessSmpiised) 

2 Hong Kong! Chiness(Trmditionm] 
ET Hong Kong Engian 


Europe 


Auetris / German 
Batgium / Franc 
Gaga / Dutch 
Buigarts / Buigaran 
Croatie ; Crosten 
Crech} Cract 
Danmark | Deruah 
Estans /Esnrian 
Fmiend / Finnish 


Tara 


5.2 Internationalisation des interfaces 


 Djout | Fronch 

— 

— Éoypt/'Arabe 

D Era Eos 

Æ Enbopia Engin 

= Gahon/ French 

D Combs /Ergen 

F + Ghana! Enghien 
Guinea Bissou / Fartuquesa 

OR Guns Ropubkc :Froncn 

& A rory Cosel/ Froncn 

FA Kenya; English 

Œ tiers; Engin 

L 


Cbys / Arabe 


India / Enghien 
Indanasis ! mdonamen 
Japan } Japarasa 
Koron / Koraan 


#e 1H 


France : French 
Garmany / Gerran 
Greece : Graek 
Hungery / Hungarisn 
volnd ; Enghah 
faraal ! Hate 

Moty /holan 
Kazakhatsn : Ruasan 
Latvia / Letrisn 


Lie LE 


ral Madagascar French 
Malsvd  Engiesh 
Mad} Franc 
Œ mavrani :Froncn 
units /Frnch 
BB Mayans!Fronch 
D morocco: Franc 
— Mozambique ! Poruguees 
OM hamu:Erou 
= Mer /Fœnch 
LA Niosra : Engisn 
D Reunien; French 
2 Rvenda ! Fanch 


Matmyais : Engiien 
New Zaaand { Engiah 
Phäppines / Engliah 
Bingapors / Engiian 


[PILE 


L'Rhaania Lite nian 
Natertende / Duten 
Narwsy : Norsregian 
Paland } Poileh 
Panugas; Porñuiguesa 
Ramank ; Roreran 
fRussh / Russian 
Sertia / Senbuan 
Stovakla ; Siowak 


CLP LEE 


2 Senegal /Franch 
Seychekes ; French 
 Shrrs Leons i Englisn 
@ sorob ; Arabe 
PE Sout Africe Engirsh 
Œ= Sudan) Amtsc 

© Srartand Engin 
M Tonrani :Engien 
EE Togo! French 

© vovm Fran 
22 Uganda /Engitan 
BE zombla : Engiieh 
= Zimbabwe | Engin 


TaheenCrunsse 
Malland ? Mai 
Viatnam ! Visinsmenn 


Spain! Sponisn 
Sweden) Swacdan 
Swizertand / French 
Surertand ! German 
Turkey { Turoan 
Ukeaine / Uicrakman 
Ukraine { Ruamars 

SE Unned Mingdom / Engis 


LL IHHE 
LS 13 


Figure 5.24 — Sur ce site (www.samsung.com), de très nombreuses langues sont disponibles, la 
page de sélection de la langue utilise des drapeaux pour guider l'internaute. 


IL est préférable d'opter pour des textes courts et simples de manière à faciliter la 


traduction, ainsi que les mises à jour du contenu. Par ailleurs, le vocabulaire spécifique, 
« jargon technique », est à éviter afin de ne pas compliquer inutilement la traduction. 


Sur un site de e-commerce, il faudra veiller tout particulièrement à la bonne 
compréhension des libellés d'articles. Les ambiguïtés peuvent être levées en faisant 
valider le catalogue par des utilisateurs locaux. En effet, dans une même langue, les 
mots ne signifient pas toujours la même chose selon le pays (voir figure 5.25). 


Employer les unités locales. 


De manière à éviter que l'utilisateur ait à convertir les informations affichées, les 
unités utilisées, en particulier pour la fiche produit d’un site de e-commerce, doivent 
être celles employées usuellement dans le pays en question. Les principaux éléments à 
convertir sont : 


les longueurs, les poids, les températures et les monnaies ; 


les codes postaux, le format des numéros de téléphone ; 


la taille des vêtements ; 
les chiffres (1,000 signifie mille aux États-Unis et un (1) en France). 
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Figure 5.25 — Au Royaume-Uni (à gauche) et aux États-Unis @ droite), 
le mot « Vest » ne désigne pas le même produit. 


Conserver la même architecture pour les différentes langues du site. 


Lorsque la vocation du site est la même paur différents pays, il est préférable de 
traduire l'intégralité du contenu du site plutôt qu'uniquement certaines parties. Dans 
ce cas, l'architecture de l'information et le contenu des pages doit être le plus proche 
possible d’une version à une autre, afin de renforcer le sentiment d’une offre globale 
cohérente et internationale. 


Ne pas utiliser de texte dans les images. 


Afin de faciliter la traduction de l'interface, il est préférable de dissocier le texte 
des images de manière à pouvoir modifier le rexte sans avoir à changer les images. 


5.2.4 Localiser l'interface 


Cependant, le site peut aussi présenter des spécificités selon le pays de l'internaute, 
particulièrement en ce qui concerne la livraison. 


Informer au plus tôt l'utilisateur sur les services offerts pour son pays. 


Lorsque l'utilisateur ne peut pas bénéficier de tous les services proposés du fait de 
sa localisation, il doit en être informé au plus tôt. En effet, il serait particulièrement 
frustrant de ne découvrir qu'à la fin du processus d'achat qu'il n’est pas possible d’être 
livré chez soi. 


Inversement, informer l'internaute étranger que son pays est bien couvert par 
le service de livraison, est un élément qui contribue à le rassurer et le mettre en 
confiance. 


Adapter le contenu du site à la localisation de l'internaute. 


5.2 Internationalisatian des interfaces" si] 


threndèue, ETS Engeh+ Mel)  M.féoetc Azœunt  Logou 


Info, -D 


tu Shop+ Participatee Community 


This week's new designs! Ste Cays Shop Giily 


Figure 5.26 — Dès la page d'accueil, ce site rassure l'internaute français en l'informant 
qu'il pourra bien être livré (message en haut de page, en jaune). 


Connaissant le pays de l'internaute, le site peut proposer des promotions ciblées. 
Dans certains cas, les produits peuvent changer en fonction de la culture ou de la 
législation du pays. Par exemple, McDonald's propose des hamburgers différents selon 
les pays. 


De même, l’ordre des produits peut être modifié de manière à mettre en avant les 
articles susceptibles d’intéresser les internautes du pays. 


Le site doit être en règle avec la législation des pays. Aux États-Unis, par exemple, 
il est autorisé d’inscrire par défaut un internaute à des messages publicitaires, tandis 
qu’au contraire, en Europe, la case à cocher permettant de s'inscrire à la newslester doit 
être décochée par défaut. 


La localisation de l’utilisateur permet aussi d'adapter le contenu du site à la 
législation lacale : interdiction de cerrains produits, exclusivités d'exploitation sur les 
pays, etc. 


ENS. 


home about cast & characters episodes games & Quizze vs & blogs photos schedule video extras 


ons RE HR. à Fe CUS (8 VON" 


THE VIDEO YOU ARE TRYING TO 
WATCH CANNOT BE VIEWED FROM 
YOUR CURRENT COUNTRY OR 
LOCATION 


Figure 5.27 — Sur ce site, les internautes français ne peuvent pas visualiser certaines vidéos 
car l'exploitation est pour l'instant réservée aux États-Unis. 
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Chapitre 5. Communiquer avec l'utilisateur 


Sur la page produit d’un site de e-commerce, préciser les conditions de livraison pour le 


pays concerné. 


L'utilisateur doit être informé, au plus tôt, avant de placer le produit dans son panier, 
des conditions particulières concernant son pays, en particulier, lorsque certains 
produits ne sont pas disponibles pour certaines destinations. 


Flip UltraHD Video Camera - White, 8 GB, 2 Hours (3rd 
Generation) NEWEST MODEL 


by Ello Video 
Arbre hr": © (142 customer reews) | L_Like) (78) 
List Price: $429-00 
race: $97,00 & this item ships for FREE with Super Saver Shipping. 


Details 
You Save: 332.00 (25%) 


Color: White 
ES 


In Stock, 
We are not able to ship this Hem to your defauit shipping address. BTS 


Figure 5.28 — Sur cette fiche produit, il est indiqué que le produit est en stock mais qu'il ne 


pourra pas être expédié à l'adresse de l'utilisateur. 


De même, afin de permettre à l'acheteur étranger d'évaluer le coût de son achat, 
le site précisera les tarifs de livraison en fonction des informations relatives à la 
localisation de l'utilisateur. Ces données peuvent être détectées automatiquement 
à partir de l'adresse IP ou bien demandées explicitement à l'utilisateur (adresse de 
livraison, voire au minimum : le pays et le code postal). 


Concevoir un formulaire pour chaque pays. 


Les informations postales et la syntaxe de l'adresse diffèrent d’un pays à l'autre. Afin 
d'éviter des erreurs de livraison, il est donc préférable de concevoir des formulaires 
spécifiques à chaque pays. 


Les informations constituant l'adresse varient selon le pays : 


En France, le numéro précède le nom de la rue, tandis qu'en Belgique, il le suit. 
Au Royaume Uni, le code postal suit le nom de la province, tandis qu’en France, 
il précède le nom de la ville. 

Aux États-Unis, l'adresse comporte le nom de l'état. En Suisse, le nom du 
canton est indiqué. Mais ce n’est pas le cas dans tous les pays. 


De même, le nom de famille n'est pas toujours obligatoire. Dans certains pays 
(Islande et certaines parties de l'Inde) il n'y a pas de nom de famille. 
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Figure 5.29 — Pour préciser le coût et les modalités de livraison, le site Apple Store demande à 
l'utilisateur de saisir son code postal. 


Ajouter une adresse 


Nom et prénom : 


Adresse ligne 1 : 
{ou nom de la sxiété) Rue, voie, boîte postale, nom de société 


Adresse ligne 2 : 
(facultatif) Appartement, bâtiment, étage, digiendie, cedex, etc. 


Ville : 
État / Région / Canton : 
(#1 approprié) 
Code postal! : 
Pays ou DOM-TOM : 


Numéro de téléphone : 


Figure 5.30 — Ici le formulaire propose à l'internaute de saisir l'état ou la région (si approprié), 
puis le code postal, avant le nom du pays. Ces informations ne sont pas appropriées pour la France. 


Proposer la saisie des dates selon les habitudes du pays. 


Les dates ne sont pas présentées de la même manière d'un pays à l’autre. De 
même, la semaine ne commence pas le même jour selon les pays. En France, on 
considère généralement que le lundi est le premier jour de la semaine, tandis que c'est 
le dimanche aux États-Unis. 


Afficher les horaires en fonction de la localisation de l'internaute. 


Selon le pays, on utilisera un affichage de l'heure sur 24 heures ou bien par demi- 
journée : AM/PM. 
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Depart Date Return Date 
FRERES 


August 2011 September 2011 
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Aller 


Septembre 2011 


Mer | Mes | Jen: Ven | Sam Oim | 
4 VON 12208 
8 © 10 11 12 13 14 $ 6 7 6 s An 
15 16 17 18 19 20 21 12 13 14 15 16 17 18 
22 23 24 25 26 27 28 19 20 21 22 23 24 25 
29 30 31 26 27 28 28 30 


Figure 5.31 — Sur la version arnéricaine du site d'American Airlines (en haut) la semaine 
commence à « Sunday » tandis que sur la version française elle débute le « lundi ». 


Dans certains cas, il peut être intéressant de distinguer le fuseau horaire utilisé 
pour afficher l'heure, mais les indications GMT ne sont pas universellement connues. 
Dans ce cas, il est conseillé de présenter l’horaire en fonction de la localisation, par 
exemple « 10h pour Paris et 17h pour Séoul ». 


5.2.5 Polices de caractères 


Adapter l'agencement de la page au sens de lecture 


De manière générale, le positionnement des éléments de l’interface doit suivre le 
sens de lecture. De ce fait, la page sera conçue pour être lue de gauche à droite dans 
une langue utilisant l'alphabet latin, tandis qu’à l'inverse, elle sera conçue de droite à 
gauche en arabe ou hébreu. 


L'interface est simplement inversée entre les deux types de langue, on parle d'effet 
miroir. Pour un site web en arabe ou en hébreu, le logo se retrouve dans le coin 
supérieur droit, le menu de navigation est calé sur le bord droit de la page et les textes 
commencent à droite. 
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Figure 5.32 — L'interface est agencée dans le sens de la lecture, 
ici la même page en français et en hébreu. 
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La taille du texte doit prendre en compie les caractères de l'écriture utilisée. 


La taille du texte permettant de garantir une bonne lisibilité des informations 
affichées dépend du type de caractères utilisés. En l'occurrence, les caractères japonais 
ou chinois nécessitent une hauteur plus importante que des caractères latins pour être 
lus sans effort. 


Utiliser l'écriture du pays. 


Lorsqu'il existe plusieurs formes d'écriture pour une même langue, on privilégiera 
l'écriture la plus courante pour les utilisateurs visés par le produit. Le japonais 
en particulier permet différents scripts d’écritures. Néanmoins, les scripts les plus 
fréquemment utilisés sur les interfaces sont le Kanji et le Katakana. 
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Figure 5.33 — Les sites japonais présentent différents types d'écriture : principalement le Kanii 
et le Katakana, mais aussi des libellés en caractères latins 


En règle générale, l'écriture horizontale est préférée sur les interfaces. 


Certaines langues, comme le japonais ou le chinois, permettent également une 
écriture verticale du texte. Toutefois, elle est peu utilisée sur les interfaces et elle 
nécessite de reconcevoir entièrement l'agencement de l'écran lors de la traduction. 


Souligner un texte en japonais peut être cause d’incompréhension. 


5.2 Internationalisation des interfaces 


is] 


En japonais ou en chinois, la ligne de soulignement peut gêner la compréhension 
des caractères, voire induire une mauvaise interprétation. Dans ce cas, il est préférable 
de distinguer les liens par la couleur ou bien de les surligner. 
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Figure 5.34 — Sur cette interface, les liens soulignés peuvent poser des problèmes 
d'interprétation 


Choisir le mode de mise en évidence en fonction de la langue. 


Pour certaines écritures, comme le japonais, le chinois ou le coréen, il n'est pas 
possible d'utiliser les modalités visuelles habituellement employées en latin, tel que 
l'italique ou le gras. Dans ce cas, il faut jouer sur la couleur ou sur les encadrements 
pour mettre en évidence certaines parties de l'interface. 
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5.2.6 Spécificités culturelles 


Certaines images peuvent être interprétées différemment selon les cultures. 


La connotation d’une même image peut être radicalement différente d'un pays à 
l’autre. Il est donc conseillé de choisir avec précaution les images à utiliser et de tester 
leur interprétation auprès des utilisateurs dans les pays visés. 


Chapitre 5, Communiquer avec l'utilisateur 


Figure 5.35 — Une main avec la paume visible est mal perçue dans certains pays d'Asie 


Les icônes de l'interface doivent s'appuyer sur une symbolique universelle. 


Afin de faciliter l'interprétation des icônes par les utilisateurs de tous les pays, 
il est préférable d'éviter les symboles avec une forte connotation locale. Le respect 
d'une symbolique « standard » présente sur d'autres interfaces et sur les systèmes 
d'exploitation les plus courants facilite l’interprétarion des icônes. 


Figure 5.36 — Les utilisateurs asiatiques ou européens ne reconnaissent pas immédiatement 
l'icône « courrier », alors qu'un américain y voit tout de suite une boîte aux lettres 


Prendre en compte la manière dont les couleurs sont mterprétées. 


La symbolique associée aux couleurs est variable d’un pays à l’autre. Pour certains 
produits, il faut adapter l'interface en fonction du pays. 


Par exemple, le rouge, couleur de la joie en Asie, est associé au mariage, tandis que 
c’est la couleur du danger en Occident. Au contraire le blanc évoque généralement le 
mariage en Occident, mais c’est la couleur du deuil en Asie. 


5.2.7 Méthodologie 


Concevoir la version internationale d'une interface, ce n'est pas seulement traduire le 
texte et agencer l'interface en fonction du sens d'écriture. Une démarche méthodolo- 
gique doit permettre de s'assurer que l'application sera effectivement utilisable dans le 
pays visé en fonction des contraintes culturelles locales. 


Conduire une étude terrain en collaboration avec des intervenants locaux. 


Dans un premier temps, une analyse in-situ des utilisateurs dans les différents pays 
permet de mieux cibler l'interface et de comprendre plus précisément les contraintes 
spécifiques du pays. 


5.3 Traitement des erreurs 
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Figure 5,37 — Aux États-Unis @à gauche) et en Chine {à droite) la couleur symbolisant le mariage 
n'est pas la même. 


Afin d'éviter de biaiser les résultats par des difficultés d’interprération de la langue 
ou des incompréhensions culrurelles, il est préférable de conduire ce cype d'étude avec 
des intervenants locaux. 


Mener des tests utilisateur dans les différents pays. 


Pour évaluer l'interface auprès des utilisateurs étrangers, il est recommandé de 
conduire des tests dans les principaux pays présentant un marché stratégique. Ces tests 
permettront d'adapter les versions internationales aux populations visées. 


De même que pour l'étude terrain, il est préférable que Les tests soient conduits et 
préparés par une personne locale. L'interview et l'analyse par des personnes pratiquant 
nativement la langue permettent de déceler plus efficacement les incompréhensions 
et autres difficultés liées à l'ergonomie de l'interface. 
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5.3.1 Types d'erreurs 


p'yrIgni 


Les erreurs sont généralement mal acceptées par l'utilisateur car elles perturbent la 
façon dont il a prévu de mener la tâche er rallongent le temps de réalisation. Qui plus 
est, les erreurs échappent, par nature, à l'utilisateur qui perd alors le contrôle sur le 
fonctionnement du système. 


Co 


Minimiser le risque d'erreur améliore de façon notable l'utilisabilité du logiciel. Le 
traitement des erreurs nécessite d’une part, en amont, de prévenir les erreurs par une 
analyse des causes et d'autre part, de faciliter la correction, car il est impossible de les 
éliminer totalement. 


Chapitre 5. Communiquer avec l'utilisateur 


Cependant, quel que soit le soin apporté à la conception du logiciel, nul ne 
pourra être sûr que l'utilisateur ne se trompera jamais. L'erreur fait partie de la nature 
humaine (errare humanum est). 


On distingue deux types d'erreurs : les erreurs d’intention et les erreurs d’exé- 
cution. On commet une erreur d'intention lorsque la manière de faire est correcte, 
mais que l’action ne permet pas d’atteindre le but visé, par exemple l'utilisateur n'a 
pas utilisé la commande correcte par incompréhension du sens des commandes ou de 
l'enchaînement des opérations. À l'opposé, lorsque l'intention est correcte mais que 
la façon de faire n'est pas bonne, c'est une erreur d'exécution, par exemple l'utilisateur 
a tapé par inadvertance sur une touche autre que celle souhaitée. 


Il n'est pas possible de différencier simplement ces deux types d'erreurs. L'interface 
doit donc fournir à l’utilisateur des moyens de les corriger quel que soit leur type. 


Pour éviter les erreurs d'intention, il importe que l'utilisateur comprenne correc- 
tement le fonctionnement du système. En ce sens, les techniques visant à faciliter 
l'apprentissage vont tendre à diminuer Les erreurs d'intention. Les recommandations 
suivantes permettent de prévenir ce type d'erreurs. 


Guider l'utilisateur. 

Fournir une visibilité sur le fonctionnement du système. 

Fournir un retour aux actions de l'utilisateur. 

Rendre possible l'exploration du logiciel. 

Fournir une aide en ligne adaptée à la tâche (« Comment faire pour ? »). 


Lorsque le logiciel est facile à apprendre, l'utilisateur se construit un modèle mental 
correct de son fonctionnement et commet moins d'erreurs. 


Les erreurs d'exécution correspondent à un « mauvais fonctionnement » du proces- 
seur humain [Card 81]. Elles trouvent leurs origines dans chacun des sous-systèmes : 
perceptif, cognitif et moteur. 


Une analyse des origines de ces erreurs permet de mieux identifier la manière d’y 
remédier. Dans les paragraphes qui suivent, nous en étudions les principales causes et 
donnons des recommandations permettant de les prévenir. 


Erreurs perceptives 


L'erreur perceptive est souvent due à une présentation similaire des objets. En 
particulier, les confusions sont courantes entre les lettres et les chiffres comme le 
montre la figure 5.36. 


B8/22/11/5S5/0O0 


Figure 5.38 — Couples lettre-chiffre sources d'erreur de perception. 


Utiliser les techniques de mise en évidence. 


5.3 Traitement des erreurs 


Une mise en évidence inefficace conduit à des erreurs. Par exemple, dans la figure 
suivante, les livres qui n’ont pas été rendus ne se distinguent pas visuellement des 
autres. 


Titre Date du prêt | Rendu 

Shutter Island 15/09/2011 non 

La nuit des temps 12/08/2011 oui 

Le monde inverti 07/08/2011 oui 

Stupeur et tremblements 15/07/2011 non 

Ubik 14/07/2011 oui 
Déconseillé 


Figure 5.39 — L'information importante risque de ne pas être vue 
car elle n'est pas mise en évidence. 


Rendre clairement visibles les changements de mode et les états du système. 


Dans le même ordre d'idées, les erreurs sont fréquentes lorsque l’état courant 
du système n'est pas suffisamment visible. Ainsi, le mode maju5cu'e, provoqué par 
l'enfoncement de la couche verrou'l'age des majuscules, est souvent source d'erreur 
sur un éditeur de texte, car, dans le meilleur des cas, seule une diode du clavier indique 
ce changement d'état. 


Fournir un feed-back immédiat aux actions de l'utilisateur. 


Le manque de retour est également à l'origine d'erreurs perceptives. Par exemple, 
il arrive d'appuyer plusieurs fois sur une touche en l'absence de retour visuel ou auditif. 


Erreurs cognitives 


Les erreurs cognitives sont liées à des difficultés de traitement de l'information, 
autrement dit de compréhension et de mémorisation, comme devoir interpréter un 
message relatif à l'emploi du logiciel (unité, format, syntaxe) ou devoir mémoriser une 
valeur d’une fenêtre à l’autre. 


Diminuer le travail de mémorisation. 


Dans l'exemple suivant, pour vérifier la disponibilité d'une vidéo, l'utilisateur doit 
ressaisir le numéro de référence dans la seconde fenêtre. Il risque de se tromper, car le 
logiciel lui demande de mémoriser la référence précise. 
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En fait, dans ce cas, le risque d’erreur est double car il peut également se tromper 
ensuite lors de la saisie de la valeur ; c'est alors une erreur motrice. 


Résultat de la recherche 


Titre Auteur Ref, 
Shutter Island D. Lehane HG1256 
La nuit des temps p Sora ge 


PENSE Disponibilité d’un livre E3 


Stupeur et tremblen 


Ubik 
Titre : 
Prêté le : 
Rendu le : 
x Annuler 
Déconseillé 


Figure 5.40 — Devoir se souvenir d'une valeur d'une fenétre à l'autre 
présente un risque d'erreur. 


Minimiser le calcul mental. 


Demander à l'utilisateur d'effectuer lui-même certains calculs, tels qu'une conver- 
sion d'unité par exemple, est source d'erreurs. L'utilisateur ne doit pas avoir à calculer 
des informations qui peuvent l'être par le système. 


Fournir des aides mnémoniques. 


Lorsqu'il n'existe pas d'aides mnémoniques ou qu'elles sont mal adaptées, le risque 
d'erreur cognitive est important. Par exemple, dans la fenêtre suivante [Mayhew 92], 
la mémorisation des lettres correspondant aux commandes risque d’être délicate. 


A. Create 
B. Delete 
C. Append 
D. Backup 


Déconseillé 


Figure 5.41 — Les indices employés ici n'aident pas l'utilisateur 
à se souvenir de la commande correspondante, bien au contraire. 


5.3 Traitement des erreurs 


Concevoir un mode de dialogue et une présentation cohérente. 


L'homogénéité facilite la mémorisation. Inversement, des incohérences sont 
sources d'erreur. C’est le cas lorsque les mêmes commandes se retrouvent à des 
positions différentes selon le menu ou la fenêtre. 


Meitre en jeu la reconnaissance plus que le souvenir. 


Ce mode de mémorisation est moins sujet à erreur. C’est le cas lorsque les 
commandes sont afhchées dans des menus ou des boutons. 


Erreurs motrices 


Les crreurs motrices sont des erreurs de manipulation. Elles sont généralement liées 
aux contraintes temporelles qui portent sur la tâche. Plus les actions doivent être 
exécutées rapidement, plus le risque d'erreur augmente. 


Agrandir les objets à sélectionner. 


Les erreurs motrices ont également pour origine des difhcultés de coordination 
œil/main, en particulier lorsque les objets à sélectionner sont petits. 


Prévoir les appuis accidencels. 


Lorsque l'utilisateur est débutant, des appuis involontaires sont courants. Il est 
donc préférable de les prévoir autant que possible, par exemple en ne prenant pas en 
compte l'appui sur les touches alphabétiques si la saisie attendue est numérique. 


De la même manière, il est conseillé de mettre en évidence le bouton d'action 
le plus probable (ex. : Valider plutôt que Annuler) s'il est effectivement dans la 
continuité de l'action. Toutefois, il est également préférable de l’associer à un dialogue 
de confirmation lorsque l’action sélectionnée est difficilement réversible (ex. : Êtes- 
vous sûr de vouloir supprimer ce document ?). 


Éviter de changer trop fréquemment de moyen d'interaction. 


Finalement, lorsque les manipulations demandées à l'utilisateur sont difficiles, les 
erreurs motrices sont plus nombreuses. C'est le cas par exemple lorsque l'interaction 
demande d’alterner différents moyens de dialogue : le clavier puis la souris, puis à 
nouveau le clavier. 


Minimiser les saisies clavier. 
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Réduire les erreurs motrices consiste principalement à faciliter les mouvements de 
la main, or la manipulation du clavier nécessite une certaine dextérité, ce qui n'est 
pas le cas de la souris. Qui plus est, si le clavier doit être employé, son utilisation sera 
simplifiée en évitant l’utilisation des couches dites de modification, telles que Ctr1, 
Alt ou Shift. 


Homogénéiser les séquences de manipulation 


Le principe d’homogénéité, c'est-à-dire la cohérence globale dans la présentation 
des contenus et dans la logique d'utilisation, permet également de faciliter les inter- 
actions de l'utilisateur avec l'interface. En effet, il est préférable que les commandes 
soient toujours ordonnées de la même manière et au même emplacement, de manière 
à éviter des erreurs de sélection. 


Pour cette raison, lorsque certaines commandes ne sont pas applicables, il est 
préférable de les rendre inactives mais présentes sur l'interface, plutôt que de les retirer 
en réordonnant l’ensemble, créant ainsi une incohérence par rapport à la présentation 
habituelle. 


5.3.2 Messages d'erreur 


L'interface peut répondre de différentes manières à une erreur de l'utilisateur. Cette 
réponse doit être adaptée au type d'erreur. 


Premier cas de figure, l'interface bloque l'utilisateur et l'empêche de continuer tant 
qu'il n'a pas corrigé l'erreur. C'est le cas des fenêtres modales, qui empêchent de 
revenir sur l'écran en arrière-plan. Ce mode de réponse convient aux erreurs graves 
pour lesquelles il y a un risque d'action définitive telle qu’une destruction de données. 
Il ne doit être utilisé qu'à titre exceptionnel, car il nuit au rythme du dialogue. 


Autre type de réaction, le logiciel met en garde l'utilisateur par un message, voire un 
signal sonore. Il prévient l'utilisateur mais il le laisse continuer. Ce type de réponse 
est adapté aux erreurs de moindre importance. 


Le logiciel peut aussi ne rien faire, ne pas répondre à la commande erronée. Ce 
comportement convient aux erreurs sur des commandes à manipulation directe pour 
lesquelles la commande devrait modifier la présentation de l'objet si elle avait été 
correctement exécutée. Cependant, il présente l'inconvénient d’être peu explicite. Il 
est donc préférable d'afficher un message en complément. 


Finalement, lorsque cela est possible, le logiciel corrige automatiquement l'erreur. 
L'utilisation de ce mode est relativement limitée. Le logiciel peut, par exemple, corriger 
les erreurs de frappe. Mais cela demeure difficile à mettre en œuvre. 


Le message d'erreur doit préciser la nature du problème et donner les moyens d'y remédier. 


Dans l'absolu, le message d'erreur doit décrire la cause de l'erreur et expliquer 
à l'utilisateur la correction à effectuer pour revenir à une situation correcte. Mais 


5.3 Traitement des ere 


il convient également d'afficher des messages brefs pour qu'ils puissent être lus 
rapidement. Un compromis est à trouver entre l'exhaustivité de l'aide et la concision 
du texte. 


Cependant, il arrive aussi, dans certains cas, que le message d'erreur mette en 
évidence une lacune de conception du logiciel, comme le montre la figure 5.42. 


Error 


LÀ 
@ Unexpected error, quitting 


— 


Figure 5.42 — Ce message est, pour le moins, peu coopératif. 


L'erreur est un événement stressant pour l'utilisateur qui perd alors le contrôle du 
logiciel et se retrouve en situation imprévue. Îl s'interroge sur la façon de corriger 
l'erreur pour reprendre le fil normal de la tâche. La formulation du message doit 
donc être soigneusement conçue afin de l'aider à revenir là où il en était, tout en lui 
apprenant comment éviter de commettre une nouvelle fois l'erreur. 


Le message doit être coopératif. 


Le message doit permettre à l'utilisateur de comprendre la nature de l’erreur. Il a 
pour objectif de l'aider à mieux assimiler le fonctionnement du système. 


Erreur : syntaxe incorrecte Erreur : le répertoire de 
destination manque 


Déconseillé Préférable 


Figure 5.43 — Des messages coopéralifs permettent à l'utilisateur 
de comprendre le fonctionnement du logiciel. 


Le message doit fournir une description du problème. 


Une description du problème et de l’état du système qui en résulte aide l'utilisateur 
à mieux comprendre la cause de son erreur. 
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Erreur d'écriture sur le disque Disque plein 


Déconseillé Préférable 
Figure 5.44 — Lorsque le message décrit l'état du système, il est plus facile à comprendre. 
Éviter les sources d'ambiguité. 


Le libellé du message doit être le plus explicite possible afin d'éviter les erreurs 
d'interprétation. 


Fichier non trouvé I|manque l'extension du 
fichier 
Déconseillé Préférable 


Figure 5.45 — Un message clair, non ambigu, est compris immédiatement. 


Adapter le message au niveau de connaissances de l'utilisateur. 


Lorsque la commande est peu utilisée ou que l'utilisateur est débutant, il est 
préférable de préciser le « Pourquoi », c'est-à-dire la sémantique de la commande. 
Au contraire, s’il s'agit d'une commande fréquemment utilisée, le « Comment », la 
syntaxe de la commande, suffit. 


Le nombre de billets doit être 
Erreur dans le 


: inférieur à 10, Sinon utilisez la 
nombre de billets 


commande Billets Groupés 


Déconseillé Préférable 
Figure 5,46 — Le message d'erreur contribue à l'apprentissage du logiciel. 
Ne pas culbabiliser l'utilisateur, ni dramatiser. 


Une erreur sur un logiciel n’a généralement rien de grave. Dramatiser ne va pas 
mettre en évidence l'erreur, mais par contre, cela vairriter l'utilisateur ! 
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reur Fatale : 
Erreu Erreur : Valeur non reconnue 


Mauvaise saisie !1! 


Déconseillé Préférable 
Figure 5.47 — Un message accusateur ne fait qu'accroitre le stress de l'utilisateur. 
De même, il est préférable d'éviter Les mots à connotation négative qui vont noircir 


inutilement le message, tels que désastreux, catastrophique, fatal, illégal, voire 
mauvais ou impossible. 


Éviter l’anthropomorbhisme. 


Le logiciel est un outil conçu pour assister l’être humain. Le langage utilisé doit 
rétranscrire cette notion d'outil afin que l'utilisateur conserve le sentiment de maîtriser 
le logiciel. 


Désolé, je ne peux pas Commande non acceptée 
accepter cette commande ! 


Déconseillé Préférable 


Figure 5.48 — Le logiciel reste une machine. 


5.3.3 Prévention des erreurs 


Les messages de confirmation permettent, lorsqu'ils sont lus, de prévenir les erreurs. 


Lorsqu'il y a un risque de perte de données ou que l'utilisateur active une commande 
difficilement réversible, un message doit signaler ce fait et demander confirmation. 


Chaque commande doit être validée par une action physique de lutilisateur. Par 
exemple, dans la figure suivante, la demande de suppression d’un fichier doir être 
confirmée par une action de l'utilisateur sur le bouton Sunoriner, 


IL est essentiel d'éviter qu'une commande importante ne soit déclenchée par 
inattention. Cependant, une fenêtre de confirmation est parfois perçue comme une 
gène par les utilisateurs expérimentés pour lesquels il est préférable d'offrir la possibilité 
de désactiver cette protection. 


Rendre inactives les commandes indisponibles. 
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Supprimer E3 


Voulez-vous supprimer cet objet ? 


Il ne sera plus possible de le récupérer. 


Supprimer Annuler 


Figure 5.49 — Le message sert à prévenir un effacement involontaire. 


Le guidage contribue également à la prévention des erreurs par une présentation 
distinctive des commandes non autorisées. Des erreurs sont évitées lorsqu'on empêche 
l'utilisateur d'exécuter les actions non valides. 


Rendre actifs les champs en fonction du contexte. 


Certains choix vont rendre caduque l’utilisation d'autres composants de l'interface. 
Afin d'éviter les erreurs de saisie, il est recommandé de ne les activer que lorsque le 
contexte s'y prête. Par exemple, dans la fenêtre suivante, rien n'indique dans quel cas 
remplir le champ Réduction 3ème âge ? 


(À remplir si âge > 70} 


Réduction 3° âge : | | Réduction 3° âge : [| 


Déconseillé Préférable 


Figure 5.50 — Le champ Réduction 3ème 39e est ambigu : dans quel cas doit-il être rempli ? Un 
texte lève le risque d'erreur mais il surcharge la fenêtre 


Il existe un risque d’erreur. Un texte explicatif permet de résoudre en partie Le 
problème, mais il alourdit la fenêtre. Qui plus est, le risque d'erreur existe toujours ; 
l'utilisateur peut saisir une valeur par erreur ou mal comprendre la consigne. 


La solution consiste à n’affcher le champ Réduction 3ème 49e que dans le cas où 
la saisie est requise. Le risque d’erreur est éliminé puisque la saisie ne sera possible que 
lorsque la valeur du champ 4e est supérieure à 70. 


5.3 Traitement des erreurs 


Nom : Nom : | Dupont 
Âge: 


L 
Lu] 
nm 
LES] 
LL 


Réduction 3° âge : | | 


Déconseillé Préférable 


Figure 5.51 — Le champ ne s'affiche que s’il est nécessaire de le remplir. 


Tester pour identifier les erreurs. 


Les erreurs, d'intention en particulier, demeurent difficiles à prévoir ; il est essentiel 
d'effectuer des tests d'utilisabilité pour les identifier avant la mise en production de 
l'application. En général, les erreurs les plus fréquentes apparaissent dès les premiers 
tests d’utilisabilité. 


5.3.4 Correction des erreurs 
Du fait de la perte de temps qui en découle, les erreurs sont généralement mal perçues 
par l'utilisateur. Afin de perturber le moins possible la planification de la tâche, il doit 


être informé au plus tôt de son erreur. Nous reviendrons sur ce point dans le chapitre 
suivant à propos des formulaires. 


Signaler l'erreur au plus tôt. 


Néanmoins, lors d'une saisie, le message d'erreur ne doit pas bloquer l'utilisateur. 
Par ailleurs, la description de l’erreur doit être la plus brève possible et ne pas nécessiter 
la recherche d'informations complémentaires. 


Placer le message là où l'utilisateur est censé regarder lorsque l'erreur se produit. 


Le message doit apparaître dans le champ de vision de l'utilisateur, c’est-à-dire 
dans la fenêtre courante ou près du champ erroné. 


Fournir la possibilité de modifier facilement les données saisies, une fois l'erreur signalée. 


Afin de minimiser l'interruption causée par l'erreur, l’utilisateur doit pouvoir 
modifier rapidement et facilement les données erronées. L'erreur est facile à corriger 
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lorsqu'on localise rapidement le composant concerné, par une mise en évidence 
adaptée, et qu’il est possible d’y accéder pour le modifier. 

Permettre le retour en arrière. 


La faculté de défaire ou d'annuler améliore la performance de l’utilisateur, car il 
travaille plus rapidement, craignant moins les erreurs. 


Autoriser les interruptions pour les commandes longues. 


L'activation involontaire d’une commande est un cas d'erreur fréquent, qui devient 
particulièrement gênant lorsque l'opération dure longremps. C’est pourquoi, il est 
recommandé de prévoir un moyen d'interrompre les commandes en cours. 


5.4 AIDE ET ASSISTANCE À L'UTILISATEUR 


L'aide est souvent demandée par les utilisateurs qui la considèrent comme utile et 
pratique. Elle n'est généralement utilisée qu'en cas de problème et souvent dans un 
contexte d'urgence. Dans les faits, elle est peu employée. Car elle est généralement 
écrite dans une optique de formation et répond rarement à l'erreur rencontrée de 
façon immédiate. 


Permettre l’accès à l'aide en ligne. 


Pour répondre efficacement aux différents problèmes que peut rencontrer l'utilisa- 
teur, l'aide doit respecter deux principes de base : être en adéquation avec le métier de 
l'utilisateur et s'inscrire dans une logique de formation. 


Structurer l'aide en s'appuyant sur la tâche de l'utilisateur. 


L'aide en ligne s'organise en fonction de la manière dont l'utilisateur se sert du 
système dans le cadre de son métier et non sur la base des fonctionnalités offertes par 
le système. Il est indispensable que l’aide réponde au contexte de la tâche en cours. 


L'aide doit participer à l'apprentissage du logiciel. 


Le comportement du logiciel doit être décrit précisément afin d'aider l'utilisateur 
dans son apprentissage et lui permettre de se construire un modèle correct du 
fonctionnement du système. 


Qui plus est, des éléments propres au métier peuvent compléter l'aide afin de 
préciser le pourquoi de certaines fonctionnalités. L'utilisateur peut être également 
invité à participer, afin de faciliter la mémorisation par une mise en œuvre pratique. 


$.4 Aide et assistance à l'utilisateur ail 


5.4.1 Différentes aides 


L'aide en ligne est mise en œuvre de différentes manières, chacune adressant les 
besoins en assistance identifiés précédemment. 


Les bulles d’aide répondent à la question « Qu'est-ce que ? ». Elles expliquent le 
rôle d’un objet de l'interface. Il importe que le texte soit court et facile à comprendre 
afin que sa lecture ne perturbe pas l'utilisateur dans sa tâche. 


L'aide est généralement accessible par Le biais d'un manuel en ligne qui répond 
lui aussi, mais de façon plus détaillée cette fois, aux questions « Qu'est-ce que ? » 
et « Comment faire pour ? ». Cependant, l'exploration dans ce type d'aide nécessite 
d'être elle-même guidée pour que l'utilisateur trouve rapidement les mots-clés lui 
permettant de cibler les solutions proposées. Elle doic être suffisamment détaillée pour 
que l'utilisateur puisse y retrouver le même contexte que la tâche qu'il est en train de 
réaliser. 


Au contraire, le didacticiel est un véritable outil d'autoformation. Il facilite la 
prise en main ec induit une attitude positive de l'utilisateur. Mais il est long à utiliser 
et parfois trop général en termes de contenu. Il n’est donc pas toujours adapté aux 
problèmes spécifiques. 


On voit depuis quelque temps une aide directe par un conseiller dans une fenêtre de 
discussion. L'avantage de ce cype d’aide est de personnaliser la réponse pour l'utilisateur, 
sans qu’il ait à la chercher lui-même. Néanmoins, quand ce mode de communication 
est disponible, il faut que l'échange avec le conseiller débute rapidement. 


5.4.2 L'utilisabilité de l'aide 


La recherche dans l’aide en ligne est une tâche supplémentaire pour l'utilisateur, il 
importe qu'elle soit la plus simple possible. Elle doit aussi minimiser l'interruption de 
la tâche en cours à solutionner car l'accès à l'aide modifie la continuité de l'activité 
de l'utilisateur. 


Fournir un accès rapide à l’aide en ligne. 


Afin de réduire cette interruption, l'accès à l'aide en ligne doit être rapide par 
le biais d’un bouton visible en permanence dans la barre de menu de l'application 
ou d’une touche de fonction, par exemple, la touche f1, facile d’accès dans le coin 
supérieur gauche du clavier. 


Décrire l'utilisation du système en s'appuyant sur le vocabulaire du métier de l'utilisateur. 


Lorsque le vocabulaire est le même, le transfert de connaissances entre le métier 
et le logiciel est plus simple et les risques d’ambiguïté sont moins nombreux. 


Permettre l'exploration. 
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La rubrique Voir aussi incite l'utilisateur à explorer l’aide en ligne et lui permet 
ainsi d'établir des liens entre les différentes commandes. 


Les titres doivent être explicites. 


Ils aident l'utilisateur à se repérer dans l’aide en ligne et permettent d'en structurer 
le contenu. 


Illustrer les descriptions avec des exemples. 


Montrer comment se servir du système est généralement plus efficace que de 
longues explications. Ainsi, un diagramme explique mieux qu’un texte la navigation 
dans le logiciel. Par exemple, pour les barres de menu, une vue de l'intégralité des 
commandes accessibles par la barre de menu aide la mémorisation. 


ventes Commandes Stocks 
Éditer Éditer Éditer 
Imprimer imprimer Imprimer 
Envoyer Envoyer Envoyer 


Figure 5.52 — Une « carte » des menus facilite la mémorisation. 


Utiliser des listes pour organiser les procédures. 


Un texte structuré est plus facile à mémoriser. De plus, la numérotation des 
différentes étapes de la procédure en facilite la réalisation lorsque celle-ci se fait en 
parallèle à la lecture de l’aide. 


5.4.3 Rédiger une aide efficace 


Les règles de rédaction, énoncées ci-après, visent à rédiger des documents clairs et 
faciles à comprendre. 


Règles de rédaction simple 


Utiliser des phrases courtes et simples, éviter les subordonnées et les relatives. 
Employer la forme active. 

Éviter les négations. 

Utiliser un vocabulaire connu de l'utilisateur. 

Faire des paragraphes courts. 

Séparer les paragraphes d'une ligne blanche. 

Faire des lignes de 80 caractères. 
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Éviter les lignes trop courtes (moins de 26 caractères). 
Éviter les coupures de mot. 


Ne pas justifier à droite. Ce type de justification augmente le temps de lecture si 
l'espacement n'est pas régulier. 


Espacer les lignes de là hauteur d'un caractère, c'est-à-dire en « double interligne ». 


À titre d'exemple, ces règles ont été appliquées dans le texte suivant. 


Données météo : Il existe différentes manières 
d'afficher les données météorologiques 

d'un site qui est identifié sur la carte par une 
chaîne de caractères. On peut tout d’abord 
afficher localement ces informations en cliquant 
droit sur le point, affichant ainsi le « pop-up 
menu ville » dans lequel on sélectionne 

« Données météo ». Mais il est également 
possible d'afficher ces informations pour toutes 
les villes de la carte en activant le radio-bouton 
« Données météo » dans le bandeau de droite. 


Déconseillé 


Données météo 


Il y a deux manières d'afficher les données 
météorologiques : 

1 ) Pour une ville donnée : 

Afficher le menu ville (clic droit) 

et sélectionner Données météo. 

2 ) Pour toute la carte : 


Activer Données météo dans 
le bandeau de droite. 


Préférable 


Figure 5.53 — Une formulation claire et simple facilite la compréhension. 


Présenter les informations dans l'ordre dans lequel l'utilisateur doit les prendre en compte. 


Lorsque l'utilisateur doit prendre une décision, il convient de lui donner les moyens 
de le faire immédiatement. Si le texte ne présente pas assez rôt Le choix, l’utilisateur 
risque de se tromper car il ne le lit pas la phrase jusqu’au bout. 


Pour sortir, sélectionner Quitter. 
Attention si vous n'avez pas 
sauvegardé vos Préférences, 
elles seront perdues lorsque 
vous aurez sélectionné Quitter. 


Déconseillé 


Vous devez sauvegarder 

vos Préférences avant de quitter 
l'application. 

Sauvegardez vos Préférences 

en utilisant le menu Session, 
puis quittez l'application 

en sélectionnant Quitter. 


Préférable 


Figure 5.54 — Les procédures sont comprises correctement 
lorsqu'elles sont présentées dans l'ordre où les décisions sont prises. 
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Indiquer le but en premier, puis l’action pour réaliser ce but. 


Dans la lecture, l'utilisateur est guidé par les objectifs. Par exemple, le texte au- 
dessous risque de ne pas être lu entièrement car le début n’est pas suffisamment 
accrocheur. 


En sélectionnant le menu Pour mémoriser les fenêtres 
Préférences, il est possible affichées, sélectionnez 
de mémoriser les fenêtres le menu Préférences. 
affichées. 

Déconseillé Préférable 


Figure 5.55 — En présentant l'objectif en premier, 
il sert d'accroche au reste du texte, 


À chaque étape de la procédure correspond une phrase. 


La description est plus aisée à comprendre lorsque le langage utilisé est simple et 
concis. 


Utiliser le bouton OK pour Pour confirmer la sélection, 

confirmer la sélection, utilisez le bouton OK. 

puis appuyer sur Fermer Effacer la fenêtre 

pour effacer la fenêtre. en appuyant sur Fermer. 
Déconseillé Préférable 


Figure 5.56 — Lorsque chaque action est exprimée dans une seule phrase, 
le texte est plus simple à comprendre. 


Pour conclure, rappelons que l’aide en ligne permet à l’utilisateur de comprendre 
le fonctionnement du logiciel, mais elle ne le rend pas facile à utiliser. 


L'aide n'en est pas une. 


Help doesn't [Nielsen 93]. Ce n'est pas l'aide en ligne qui aide l'utilisateur, ce sont 
les différents moyens mis en œuvre dans l'interface afin de le guider et lui permettre 
d'éviter les erreurs. L'aide en ligne ne résout pas les problèmes d’utilisabilité. C'est par 
une conception de l'interface guidée par l'utilisation que l'on évite les problèmes et 
non par l'aide en ligne qui a uniquement pour rôle d'expliquer le fonctionnement du 
logiciel. 
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5.5 CAS PRATIQUE : BCA EXPERTISE, IMPLIQUER LES 
UTILISATEURS POUR GARANTIR LA QUALITÉ DE 
L'EXPERTISE 


5.5.1 Automatiser l'analyse des devis de réparation 


BCA Expertise est le leader de l'expertise automobile sur l'ensemble du territoire 
français. Ses principaux clients sont les groupes d'assurance : Axa, Covea AIS (MAAE 


MMA, GMF), Generali, Pacifica (Crédit Agricole), Groupama-GAN et Aviva. 


BCA Expertise réalise des opérations d'expertise via la photo expertise depuis 
1995. Dans ce cadre, l'expert BCA sollicite du réparateur l'envoi d'un dossier EAD 
constitué de photos du véhicule et d'un devis de la réparation. Le devis proposé par le 
réparateur était ensuite vérifié manuellement par un expert BCA Expertise. 


En 2010, BCA Expertise a conçu un système à base de règles métier permettant 
d'analyser automatiquement les devis afin de faciliter la tâche de l’expert. L'objectif 
est de permettre à l'expert de traiter les dossiers plus précisément et plus efficacement. 
Dans le cadre de ce projet, BCA Expertise nous demande de l'accompagner dans la 
conception des interfaces. 


5.5.2 Une maquette interactive pour visualiser concrètement le rendu final 


Cette nouvelle application est au cœur du système d'information BCA Expertise. Son 
rôle est essentiel ; à la lecture du devis, l'expert décide de valider le chiffrage er donne 
accord à la société d'assurances de régler le réparateur sur ces bases. L'ergonomie de 
l'interface ne doit donc pas permettre la moindre ambiguïté sur l’interprétation des 
informations affichées. 


Suite à un premier audit de l'application existante, nous avons conçu de manière 
itérative les écrans en collahoration avec les utilisateurs finaux venant des différentes 
agences BCA Expertise. 


La maquette interactive que nous avons réalisée a permis de valider les difté- 
rents cas de figure envisageables lors de l'analyse d’un devis réparateur. Les experts 
présents dans le groupe de travail ont échangé avec l’équipe de maîtrise d'ouvrage 
sur les fonctionnalités proposées. Ils ont vérifié que les informations affichées leur 
permettaient effectivement de prendre rapidement une décision. Ces échanges ont 
permis d'optimiser les écrans, voire, dans certains cas, d'amender les spécifications 
fonctionnelles. 
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Figure 5.57 — Maquette « fil de fer » réalisée lors des ateliers de travail 


5.5.3 Des écrans conçus pour faciliter l'analyse par l'expert 


La tonalité bleu clair choisie pour habiller l'interface vise à cranscrire une atmosphère 
de calme afin de conforter l'expert dans son analyse. Les couleurs pastel vont, elles 
aussi, concourir à rendre l’ensemble à la fois doux et convivial. 


Le système d’onglets ainsi que la zone d'actions principales (en bas) se détachent 
par un fond bleu plus profond. Les boutons d'actions secondaires sont trairés également 
en bleu de manière à se distinguer rapidement. Les zones de travail, en bleu léger, 
sont posées sur un arrière-plan blanc, contribuant à structurer l'ensemble. Le design 
graphique reflète un sentiment de modernité et de professionnalisme. 
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Figure 5.58 — Design graphique de l'application 


5.5.4 Deux fois moins de temps pour traiter un dossier 


Le nouveau système sera opérationnel en 2012. [l sera utilisé par les gestionnaires et 
les experts BCA Expertise, soit environ 1 000 personnes réparties sur l'ensemble du 
territoire français. 


L'application doit permettre de traiter environ 50 000 rapports d'expertise par an. 
Les premières estimations montrent un gain de 50 % dans le temps de traitement d'un 
dossier. Cette application permettra donc à BCA Expertise de doubler sa capacité de 
traitement. 


Chapitre 5. Communiquer avec l'utilisateur 


« Les besoins et contraintes des clients internes (utilisateurs) sont au cœur de nos 
préoccupations dans la conception de nos outils. 


La démarche ergonomique est clairement bâtie sur le recensement des besoins 
fonctionnels et utilisateurs. Une fois ces besoins définis nous travaillons alors au 
maguettage en plusieurs étapes. D'abord un maquettage fil de fer, l'apphcation est 
alors présentée dans sa plus simple définition afin de valider les fonctionnalités. Une fois 
cette maquette validée, une figuration plus design est définie et de nouveau soumise à 
la validation des utilisateurs. Une fois les remarques prises en compte, l'outil est validé et 
la mise en œuvre peut être enclenchée. 


Les outils sont au cœur de notre quotidien et il est important pour le bien-être des 
utilisateurs, que les interfaces soient conviviales, attractives et interactives. La démarche 
ergonomique nous a apporté une aide précieuse et les consultants ont fait preuve d'une 
grande adaptabilité et réactivité face aux exigences de nos utilisateurs. » 


Gildas VILLEDIEU 
Responsable Département Maîtrise d'Ouvrage BCA Expertise 


Copyright © 2013 Dunod. 


« Un design est intuitif quand les gens savent clairement ce qu'ils peuvent faire et qu'ils n’ont pas 
à suivre une formation pour y arriver. Lorsque la conception n'est pas intuitive, notre attention 
s'éloigne de ce que nous essayons d'obtenir, pour comprendre comment l'interface va nous 
permettre d'obtenir ce que nous voulons. » 

Jared Spool!, What Makes a Design Seem Intuitive, 2009. 


6.1 Perception des informations 

6.2 Techniques de mise en évidence 
6.3 La couleur 

6.4 Les icônes 

6.5 Le texte 


6.6 Présentation des produits pour l’e-commerce 


6.7 Cas pratique : une démarche ergonomique pour concevoir un nouveau terminal de vente 


6.1 PERCEPTION DES INFORMATIONS 
6.1.1 Les lois de la perception 


Au début du XX° siècle, les processus cognitifs de la vision ont été étudiés dans le 
cadre d’une théorie plus large appelée Théorie de la Forme (Gestalttheorie). Partant 
du principe que le système visuel perçoit le tout avant ses parties, les théoriciens de 


1. Jared M. Spool est le fondateur d'User Interface Engineering (UIE). Il est expert en conception des 
interfaces utilisateur er spécialiste des techniques de maquettage de basse fidélité. 
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la forme, Wertheimer, Kôhler et Koffka (1935), ont mis en évidence un ensemble de 
lois qui régissent le fonctionnement perceptif chez l'être humain. 


Ces lois de la perception nous fournissent des règles pour agencer le contenu de 
l'interface, ce qui va conditionner sa lisibilité et sa compréhension pour l'utilisateur. 
Nous retiendrons ici les trois principales lois : la loi de proximité, la loi de similitude 
et la loi de bonne continuité (voir aussi [Cohen 00 et Casanova 01]). 


Loi de proximité : 
L'œil regroupe les objets praches les uns des autres 


0000 
Loi de similitude : Loi de bonne continuité : 
L'œil regroupe les objets semblables l'œil regroupe les objets qui 


partagent le même alignement 


Figure 6.1 — Les lois de la perception visuelle permettent de mettre en évidence la structure de 
l'information et ainsi d'en faciliter la compréhension 


Regrouper visuellement les informations semblables. 


La loi de proximité conduit la vision à regrouper les objets qui sont proches les 
uns des autres. Des zones sont mises en évidence par rapport au reste de la page en les 
délimitant par un trait, un espacement ou une même couleur d'arrière-plan. 


La loi de similitude incite l'œil à réunir des entités qui se ressemblent par la forme, 
la couleur ou la taille, On attribue une même signification aux données présentées de 
la même manière. Une typographie semblable (même police de caractères ou même 
couleur) permet de montrer des ressemblances entre des informations situées à des 
emplacements différents sur l'interface. 


La loi de bonne continuité conduit la vision à rassembler des éléments qui 
partagent le même alignement. 


6.1 Perception des informations 


Appliquées au web, Les lois de la perception visuelle vont guider l'organisation de 
la page et permettre à l'internaute de comprendre plus efficacement le contenu. 


Les autres clients segedent ancs moment memes 


L'étrange voysge de Apocalypse Haw redux Le œrabére de Prague Hi Harry Porter et Les Harry Patrar et let RaDonts 


Montusur Daidry « Coffret 2 Urabarts ca Llacirorec Ans Rétdueérs de Le. Rae 0 Ly Mandy More, Zacharr 

Mère Lévy Marti Shétn, Madion hrache Sa Lee Dnel Gedchfi, Rupert Cafesl Radchéia, Aupart Lewr, Donna 

L brenée, tuf-23.60 EUR 21,85 EUR 41,99 Grre, Area, C 

pu 40 EUR 19.9$ Blu-re bi tuû-4e n4 EUR 14 94 
Fonds 69 EUR 19.39 son 20,0 EUR 2196  sumétt EUR 14,59 


Figure 6.2 — L'œil reconnait ici huit produits (loi de proximité) dont il peut rapidement identifier 

la couverture, le titre, le type ainsi que le prix (loi de similitude). L'organisation visuelle permet une 

lecture rapide, laissant l'internaute filtrer les informations qui l'intéressent {les prix ou les titres, par 
exemple). 


6.1.2 Hiérarchie visuelle 


Sur le web comme sur le logiciel, l'organisation de l'interface vise à rendre perceptible 
la structure des informations qui la composent. L'objectif est de montrer les liens qui 
existent entre les différents éléments afin de « créer une hiérarchie visuelle évidente » 
[Krug OT]. 


Plus l'élément est important, plus il doit se voir. 


C'est une règle de « bon sens » qu'il n’est pas inutile de rappeler : les informations 
importantes doivent être mises en évidence. Pour cela, différents artifices graphiques 
sont à la disposition des concepteurs : la taille, la graisse des caractères (épaisseur 
du trait}, la couleur de l'objet en lui-même, voire aussi la couleur de l’arrière-plan. 
Naturellement, l'emplacement joue aussi : plus l’objet est en haut et au centre de la 
page, plus il est visible. 


L'imbrication visuelle permet de hiérarchiser l'information. 


L'imbrication visuelle est un procédé graphique qui vise à donner un rôle dominant 
à certains éléments de la page. Le moyen le plus simple consiste à placer l'information 
de niveau supérieur au-dessus du reste. C'est que nous pratiquons pour des documents 
textuels en écrivant le titre au-dessus du paragraphe. 
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Figure 6.3 — L'imbrication visuelle fait ressortir les différentes zones de la page 
et permet de distinguer la vocation des différentes parties de l'interface. 


6.2 TECHNIQUES DE MISE EN ÉVIDENCE 


De nombreux moyens sont à la disposition du concepteur pour attirer l'attention de 
l’utilisateur sur les objets de l'interface : le clignotement, la graisse, l'inversion vidéo, 
la taille, la police de caractères, le soulignage, la forme, les puces, le rapprochement, 
l'encadrement, le son et la couleur... Cependant, ces différentes techniques ne sont 
pas équivalentes. Tout le problème est de les utiliser à bon escient, de façon cohérente 
et Surtout avec parcimonie. 


Pour être efficace, la mise en évidence doit rester exceptionnelle. 


En effet, les techniques de mise en évidence sont d’autant plus efficaces qu'elles 
conservent un caractère d'exception par rapport à l'affichage standard. Un emploi 
abusif a généralement l’effet contraire et pour conséquence de disperser l'attention de 
l'utilisateur. 


Limiter le nombre total de moyens de mise en évidence utilisés sur l'interface (5 au 


maximum) . 


La signification des différents modes en sera plus facile à mémoriser, l'interface sera 
plus facile à apprendre. 


6.2 Techniques de mise en évidence 


6.2.1 


Ne pas utiliser simultanément plusieurs moyens de mise en évidence sur le même objet. 


L'efficacité d'une mise en évidence n’est pas liée au nombre de moyens utilisés. 
Qui plus est, la mise en évidence ne doit pas rentrer en conflit avec les autres artifices 
graphiques utilisés sur l'interface. 


La mise en évidence d'un objet ne doit pas affecter la perception de son état. 


En particulier, l'inversion de la couleur de fond et de la couleur de texte (inverse 
vidéo) présente l'inconvénient de modifier la couleur de base de l’objet. L'information 
associée à cette couleur est alors perdue. 


La mise en évidence d'un objet doit s'arrêter dès la disparition de l’état correspondant ou 
l'action de l'utilisateur. 


La mise en évidence reflète l'état d'un objet. Il convient cependant que l'utilisateur 
garde le contrôle sur ce mode de présentation. La possibilité doit lui être offerte 
d'acquitter l’événement, signifiant qu'il l'a pris en compte. 


Nous présentons ci-après les différentes règles à suivre pour utiliser correctement 
les techniques visant à mettre en évidence un objet à l'écran. 


Clignotement 


Le système visuel humain est particulièrement sensible aux mouvements, en particulier 
les cellules situées dans la zone périphérique de la rétine. Si l'œil fixe l'écran et qu'un 
objet bouge ou clignote dans une autre partie de l'écran située dans le champ visuel, 
le cerveau détecte le mouvement et incite le regard à se tourner vers cette source 
visuelle. En contrepartie, si plusieurs objets clignotent ou se déplacent, l'œil s'oblige 
à ne fixer que ceux qui ont un intérêt pour lui. Il filtre les données à traiter. Dans 
ce cas, le mouvement n'attire plus le regard. C’est pourquoi le clignotement doit rester 
une exception. Îl ne peut s'appliquer qu'à un petit nombre d'éléments de l'écran, de 
préférence proches les uns des autres. 


Le clignotement sert à attirer l'attention sur un objet en périphérie du champ de vision. 


[l s'agit probablement du moyen de mise en évidence le plus efficace. Il convient 
cependant de l'utiliser avec parcimonie car il distrait l’attention de l'utilisateur et 
provoque une fatigue visuelle. Il est donc préférable d'employer une fréquence lente 
(2 à 5 Hz) avec une durée d'affichage supérieure à celle d'effacement. 


Dans la mesure où le clignotement nuit à la lisibilité, il est à éviter pour les textes. 
Toutefois, lorsqu'il n’est pas possible de faire autrement, un moyen de préserver la 
lisibilité est de mettre en œuvre un clignotement par changement de couleur, et non 
par effacement temporaire. 
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Offrir la possibilité d'arrêter le cligmotement. 


Dans la mesure où il est particulièrement attractif, ce mode de mise en évidence 
est aussi relativement désagréable. L'utilisateur doit donc pouvoir le contrôler. 


6.2.2 Couleur de fond 


Bilan des ventes F4 


| Jen2011/ Fev2011/ Mar2011 Avr-2011 
Pulls 1856 2051 1426 1256 
Chemises 1532 2045 1985 2045 
Chaussettes 3232 3365 3654 3562 
Vestes 525 662 525 498 
Pantalons 205 325 207 333 
Chaussures 252 205 187 284 

Imprimer Envoyer Annuler 


Figure 6.4 — Le changement de la couleur du fond met en évidence le texte. 


Modifier la couleur de fond permet de faire ressortir une chaîne de caractères. 


Ce mode de mise en évidence est assez efficace. Il présente cependant l’inconvé- 
nient de réduire la lisibilité du texte en réduisant le contraste, en particulier lorsqu'un 
fond sombre est employé. Il est donc à éviter pour des textes longs. 


6.2.3 Graisse 


La graisse permet de mettre en évidence une chaîne de caractères dans un texte. 


Ce mode de mise en évidence est moins efficace que l’inversion vidéo pour une 
utilisation similaire. Toutefois, il dénature beaucoup moins l'apparence graphique du 
texte. Il est souvent utilisé dans les pages web, où il est très efficace. 


Comme toute technique de mise en évidence, il convient d'employer la graisse 
avec parcimonie, sinon elle perd son efficacité. Il est donc conseillé de ne pas mettre en 
gras plus de deux ou trois mots dans une même phrase, voire dans un même paragraphe. 
Ils forment ainsi un cout dans le champ visuel : l’œil les lit ensemble. Au contraire, 
plus de trois mots en gras dans une phrase ralentissent la lecture. 
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6.2 Techniques de mise en évidence 


Bilan des ventes E4 


Jan-2011 Fev-2011 | Mar-2011 Avr-2011 

Pulls 1856 2051 1426 1256 
Chaussettes 3232 3365 3654 3562 
Chemises 1532 2045 1985 2045 
Vestes 525 662 525 498 
Pantalons 205 325 207 333 
Chaussures 252 205 187 284 
Imprimer Envoyer Annuler 


Figure 6.5 — Le texte est mis en évidence par une graisse plus épaisse. 


6.2.4 Taille 


Ce mode de mise en évidence est assez peu utilisé sur les interfaces homme-machine. 
Cependant, il peut servir à représenter l’importance relative de différents objets 
graphiques. 


La taille est utile pour les comparaisons relatives. 


% Chiens 4 Chats 


Appartement Pavillon Maison 


sû 


25 


Figure 6.6 — La taille permet de comparer rapidement les données du schéma. 


Il convient néanmoins de limiter le nombre de tailles possibles (5 au maximum) 
afin qu'elles demeurent faciles à différencier. 


6.2.5 Police de caractères 


La police permet de distinguer une chaîne de caractères dans du texte. 
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Ce codage est moins efficace que l’inversion vidéo, mais il peut être utilisé pour de 
longs textes ; par exemple, dans la figure suivante, le texte de l’aide se distingue par 
une police italique. 


Bon de commande x | 


Num | Article | Couleur | Faille | Qté Prix 
îi Jean Bleu 40 1 72,00 
2 Jean Noir 40 1 72,00 
3 Jean Bleu 36 1 72,00 
4 Pull Vert xL 1 29,00 
s Pull Bleu ciel L 1 29,00 


TOTAL : 274,00 
Pour plus de détails, cliquer sur l'articie. 


Modifier OK Annuler 


Figure 6.7 — La police de caractère sert ici à distinguer le rôle joué 
par chacun des textes de l'interface. 


6.2.6 Soulignement 


Le soulignement sert à mettre en évidence du texte. 


Le soulignement réduit la lisibilité. Il est donc à éviter pour des textes longs. Ce 
mode de mise en évidence est utilisé en association avec la couleur pour représenter 
les liens. 


6.2.7 Forme 
La forme permet d'identifier rapidement le rype d’information. 


La forine présente l'intérêt de prévenir l'utilisateur sur le type de donnée affichée 
avant qu’il ne la lise effectivement. Afin de faciliter la compréhension de ce codage, 
il convient de définir des règles pour l’ensemble de l'application en associant une 
forme précise à chaque type d’information. En outre, l'information associée à la forme 
plutôt qu'à la couleur uniquement, permet une compréhension moins ambiguë pour 
les daltoniens. 
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6.2 Techniques de mise en évidence 


VW ) 


Validation Suppression / Erreur 


Figure 6.8 — La forme est un moyen de mise en évidence assez riche 
car elle apporte une connotation additionnelle. 


6.2.8 Proximité 
La proximité permet d'associer des informations. 


Regrouper les informations en Les rapprochant les unes des autres est un moyen de 
mettre en évidence les informations connexes. L'utilisation de puces ou la constitution 
de paragraphes distincts permettent cet effet de proximité. 


Données météo 


+ ly à deux manières d'afficher les données 
météorologiques : 


> Pour une ville donnée : 
Afficher le menu ville (clic droit} 
et sélectionner Données météo, 
> Pour toute la carte : 
Activer Données météo dans 
le bandeau de droite. 


Figure 6.9 — Les puces servent non seulement à mettre en évidence les informations 
importantes mais aussi à structurer là présentation. 


Km départ Date départ Km départ Date départ 
120 12/10/2011 
120 12/10/2011 
Km arrivée Date arrivée Km arrivée Date arrivée 
230 15/10/2011 
230 15/10/2011 
Km parcourus Durée Km parcourus Durée 
110 3 jours 
110 3 jours 
a. Déconseillé b. Préférable 


Figure 6.10 — Des rapprochements mal adaptés conduisent à une mauvaise interprétation (a). 
Une fois les informations correctement regroupées, la signification de la fenêtre apparaît plus 
clairement (b). 
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6.2.9 Encadrement 


L'encadrement sert à regrouper les données et à focaliser le regard. 


L'encadrement est utile pour renforcer la mise en évidence par proximité. 


Kilométrage Durée 

Départ : 120 Départ : 12/10/2011 
Arrivée : 230 Arrivée : 15/10/2011 
Parcours: 110 Total : 3 jours 


Figure 6.11 — L'encadrement permet d'associer différentes données. 


6.3 LA COULEUR 


Le graphisme d’un logiciel ne répond pas uniquement à des critères esthétiques. Il 
doit avant tout permettre une mise en évidence efficace et une lisibilité correcte des 
informations. Toutefois, l'esthétique est aussi à prendre en compte car c'est un facteur 
de préférence qui contribue à une attitude positive de l'utilisateur. Qui plus est, le 
graphisme de l'interface véhicule les valeurs du produit, son identité visuelle. 


La couleur est un élément important de la signalétique de l'interface homme- 
machine. Elle met en évidence l’état courant des objets affichés et permet de regrouper 
des objets de même nature mais éloignés par leur position. 


Choisir des couleurs réparties tout au long du spectre visible. 


Lorsque la couleur est porteuse de sens, il est essentiel que l’utilisateur puisse la 
reconnaître, c'est-à-dire la nommer sans ambiguïté. Pour cela, les expérimentations 
ont montré que lorsque les couleurs sont réparties de façon homogène le long du 
spectre visible, elles sont plus faciles à distinguer les unes des autres. 


Par ailleurs, il a également été montré que les couleurs saturées se reconnaissent 
plus facilement que les autres. Cependant, ces couleurs sont à manier avec précaution 
car elles posent des problèmes de lisibilité pour le texte. 


Utiliser la couleur et un autre moyen de mise en évidence pour afficher une information 
importante. 


Une couleur n'est pas perçue exactement de La même manière par tout Le monde. 
Rappelons, à ce sujet, que le daltonisme touche une proportion non négligeable 
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6319 couleur 


d'hommes (8 %), tandis qu'on le rencontre moins fréquemment dans la population 
féminine (0,4 %). Il est donc préférable de ne pas s'appuyer uniquement sur la couleur 
pour la mise en évidence. 


Vision normale Deuteranopie (8% des hommes) 


Protanopie {1% des hommes) Tritanopie (proche de 0%) 


Figure 6.12 — La perception des couleurs est variable selon le type de daltonisme. Toutefois la 
deuteranopie est le cas le plus fréquent, c'est-à-dire une confusion du vert et du rouge. 


Distinguer les couleurs en teinte et clarté. 


La différence en clarté rend la distinction possible par les daltoniens car elle ne 
porte pas uniquement sur la longueur d’onde de la couleur. 


6.3.1 Composantes de la couleur 


Le codage Teinte, Saturation, Intensité (ou HSV pour Hue, Saturation and Value) reflète 
la manière dont la couleur est perçue par l'être humain. Il est pratique pour régler les 
couleurs de l'interface : 


+ L'indice de teinte correspond à la longueur d'onde principale. Elle détermine ce 
que l’on appelle couramment la couleur. 

+ Le niveau de saturation représente la largeur de la bande de longueurs d'onde 
occupée par la couleur : son spectre. La couleur est dite saturée lorsque la 
bande est étroite. Au contraire, lorsque la bande est plus large, on parle de 
couleur « désaturée » : ce sont les pastels. La saturation minimale est obtenue 
par un mélange équilibré de routes les longueurs d'ondes. La couleur est dite 
achromatique : c’est Le gris. 


Copyright © 


Chapitre 6. Présenter l'information 


+ Finalement, l'intensité est le degré de réflexion de la couleur, la façon dont 
elle réfléchit la lumière. Cette caractéristique est également appelée clarté. Elle 
correspond à un niveau de gris : de blanc à noir. 
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Figure 6.13 — L'outil Contrast Analyzer permet de mesurer le contraste entre la couleur du texte 
et la couleur du fond de manière à garantir la lisibilité des informations. 


On parle également de la brillance ou luminance d’une source lumineuse. Ce 
paramètre ne dépend pas uniquement de la couleur. Il correspond à l'énergie lumineuse 
émise par l'objet coloré. Il est conditionné par la puissance de la source lumineuse, par 
l’éclairement ambiant ainsi que, bien entendu, par la couleur. 


6.3.2 Codage couleur 


Le codage couleur, appelé aussi code des couleurs, consiste à associer à chaque couleur 
de l’interface une signification précise et uniforme pour l’ensemble de l'application. 


Dans une interface homme-machine, la couleur peut être utilisée de diverses 
manières. Son principal intérêt est de pouvoir ajouter de l'information à un objet 
sans en modifier la forme : la couleur permet d'indiquer un état. Elle sert également 
à regrouper les informations de même nature en les affichant de la même couleur, 
voire en utilisant des dégradés pour établir une relation entre ces objets. Inversement, 
la couleur va servir à mettre en évidence à l'écran certains composants colorés de 
manière distinctive. 


Il importe toutefois de minimiser la charge perceptive pour des raisons esthétiques 
et d'efficacité du codage. 


Minimiser le nombre de couleurs (7 “ 2). 


Dunod. 


2013 


yright 


Cop 


63 Le coeur 


Pour être efficace, le codage couleur doit être simple. Dans la mesure où chaque 
couleur est porteuse d’un sens, un trop grand nombre de couleurs conduit à un codage 
complexe difficile à assimiler par l'utilisateur. À partir de 10 couleurs, la limite de la 
mémoire à court terme est atteinte et l'on doit faire appel au souvenir, c’est-à-dire à la 
mémoire à long terme, pour se remémorer la signification des couleurs!. 


Pour un objet donné, le nombre de couleurs utilisées doit être nettement inférieur au 
nombre d'éléments qui le composent. 


Un nombre trop important de couleurs, qui plus est sur une petite surface, est 
çause de fatigue visuelle importante et source de confusion. Le codage couleur perd 
son efficacité lorsque la densité de couleurs est trop grande. 


Face à une interface comportant de nombreuses zones de couleur différentes, le 
travail de perception est plus difficile, on parle de surcharge visuelle. Qui plus est, 
lorsque l'interface est chargée, l'utilisateur perçoit mal la hiérarchie visuelle entre les 
éléments car aucune information n'est véritablement mise en avant. 
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Figure 6.14 — Sur ce site, la hiérarchie visuelle ne fonctionne pas car l'interface est trop chargée 


S'il n'est pas possible d'utiliser une couleur pour coder l'état de l'objet, un autre code 
graphique doit être employé. 


Le choix des couleurs peut être restreint pour deux raisons : soit l’objet utilise 
déjà un nombre important de couleurs, soit toutes Les couleurs disponibles sont déjà 


L. Les notions de mémoire à court terme et de mémoire à long terme sont présentées en annexe. 


Chapitre 6. Présenter l'information 


employées. Dans ce cas, il est préférable d'utiliser un autre code graphique : un symbole, 
une lettre, la texture du trait, etc. 


Respecter le sens que l'utilisateur donne aux couleurs. 


Dans la mesure où l’on attribue un sens à une couleur, il convient de vérifier au 
préalable que l'utilisateur n'associe pas déjà une autre signification à cette couleur. En 
effet, certaines professions partagent de façon plus où moins explicite une sorte de 
code des couleurs, comune le montre la figure 6.15. 


| 


Finance | Chimie pen Cartographie | nus 
B Rouge Perte Chaud Interdicrion Nationale 
M Vert Secours Forêt Touristique 
" Jaune Avertissement Désert Départementale 
&m Bleu Froid Obligation Mer 
BE  Nor Gain Fin d'interdiction 


Figure 6.15 — Certains domaines utilisent un code des couleurs auquel il convient d'être vigilant 
lors de la conception du logiciel. 


En terines de sécurité, la signification des couleurs est définie dans la norme NF X 
08-003. Ce codage est utilisé en particulier pour la signalisation routière. 


Mais la connotation que l'utilisateur attribue à priori aux couleurs est aussi 
culturelle. Le blanc par exemple, qui, dans la culture européenne, symbolise la pureté, 
est la couleur du deuil en Asie. De même, le rouge est associé à la mort en Afrique, 
tandis qu’il signifie la joie pour les cultures asiatiques et la pureté en Inde. Certaines 
couleurs peuvent avoir une connotation très forte ; ainsi, le vert et l'orange ont une 
signification religieuse en Irlande où ils sont portés par Les catholiques et les protestants. 
Cette dimension symbolique de la couleur doit être intégrée suffisamment tôt dans le 
design, car elle peut être source d’une mauvaise compréhension de l'interface, voire 
d'un rejet de la part de l’utilisateur. Il faut particulièrement redoubler de vigilance sur 
ce point pour les sites à visée internationale. 


6.3.3 Choix des couleurs 


Une fois le type de couleur choisi, le choix de la couleur consiste à ajuster précisément 
chacune de ses composantes en teinte, saturation et intensité. Cette tâche est un 
compromis entre les règles qui suivent. 


Pour les grandes surfaces, utiliser des couleurs peu saturées. 
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L'emploi d’une couleur vive sur une grande surface confère une certaine agressivité 
à l’interface. Il est source de fatigue visuelle lors d'une utilisation prolongée du logiciel. 
Au contraire, les couleurs peu saturées, pastel, sont plus reposantes. 


Le choix de la couleur de fond d’écran est déterminant pour le rendu visuel de 
l'ensemble de l'interface. 


Utiliser une couleur neutre et claire pour le fond de l'écran. 


Le gris est la couleur neutre par excellence car il est achromatique, c’est-à-dire 
que toutes les longueurs d'onde ÿ sont présentes à quantité égale. Il présente un 
grand intérêt pour les écrans de visualisation informatique. En effet, il facilite la 
perception des différentes formes de codage utilisées habituellement par les logiciels 
(couleur, clignotement, etc.}. Le gris garantit le fonctionnement d’un grand nombre de 
contrastes par rapport au fond de l'écran. Les données affichées sur du gris apparaissent 
beaucoup plus nettement que si un fond coloré est utilisé. Dans une ambiance 
lumineuse standard, un fond gris clair diminue les réflexions et offre un meilleur 
équilibre de luminance entre l'écran et les autres surfaces du champ de vision. De 
ce fait, la fatigue visuelle est nettement diminuée. Une interface à fond gris est bien 
adaptée pour une application professionnelle sur laquelle l'utilisateur travaille de 
nombreuses heures. 


Rappelons cependant le caractère « vampirique » du gris, selon l'expression 
d’Eugène Delacroix, qui atténue les couleurs voisines, surtout lorsqu'elles occupent de 
petites surfaces. Qui plus est, le gris est généralement perçu comme une couleur triste. 
C'est pourquoi, une interface à fond gris est généralement rehaussée par des toniques 
plus vives et plus chaudes. 


Dans les autres cas, on préférera un fond blanc généralement mieux apprécié des 
utilisateurs. 


6.3.4 Méthode de choix des couleurs 


La première règle à suivre lorsque l’on conçoit une interface en couleur est. de ne pas 
utiliser la couleur ! Il est préférable de concevoir en noir et blanc, puis de n’ajouter la 
couleur que lorsqu'elle est utile. C’est la meilleure garantie pour que la couleur soit 
utilisée à bon escient, une fois tous les autres moyens de mise en évidence utilisés. 


IL est essentiel de tester les couleurs de visu, car le rendu dépend non seulement du 
type d'écran utilisé, mais aussi des conditions d’éclairement de la pièce. 


Choisir des couleurs saturées pour mettre en évidence les informations importantes. 
Utiliser des couleurs peu saturées pour les informations de moindre importance. 


Il convient néanmoins d’être vigilant sur l'emploi des couleurs saturées, car elles 
sont cause de fatigues visuelles et nuisent, pour certaines d'entre elles, à la lisibilité, 
en particulier le rouge et le bleu saturé. Rappelons qu'il est aussi possible de jouer sur 
la clarté de la couleur pour faire ressortir l'objet. 
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6.4 LES ICÔNES 


Les icônes sont des graphismes plus ou moins abstraits auxquels est associée une 
signification dans l'interface. Elles occupent moins de place à l’écran que du texte et 
sont généralement appréciées des utilisateurs. 


Le principal intérêt d'une icône est probablement le fait d'être indépendante de 
la langue. Il convient toutefois d'être vigilant à la connotation culturelle associée à 
certains graphismes. Par exemple, un français ne verra pas nécessairement une boîte 
aux lettres dans l'icône de la figure 6.16. 


Déconseillé 


Figure 6.16 — Cette icône est ambiguëé car, à part les Américains, rares sont ceux qui y voient 
une boîte aux lettres. 


Il est donc indispensable de s'assurer de la bonne compréhension des icônes avant 
le déploiement d’une application logicielle ou d’un site web. Si l'interprétation est 
immédiate, les utilisateurs, même peu fréquents, ne seront pas freinés par les icônes 
proposées. 


Une icône est susceptible de contenir plus d'informations que du texte sur une 
même surface. De plus, l'icône est interprétée plus rapidement que du texte. Elle n'est 
généralement pas lue, mais plutôt reconnue, ce qui peut être source d'erreur lorsque la 
charge de travail est importante. 


L'utilisation des icônes présente des inconvénients, en particulier sur le plan de 
l'apprentissage du logiciel. Le problème le plus fréquemment rencontré est celui de la 
compréhension de l'icône. Par exemple, quelle est la signification de l’icône suivante ? 


Figure 6.17 — Que veut dire cette icône ? Modifier la couleur, Copier le format ou Effacer ? 


Depuis Les premières interfaces, de Xerox puis d'Apple, « les utilisateurs préfèrent 
les interfaces à icônes » [Wiedenbeck 99]. Probablement parce qu’elles donnent un 
aspect ludique à l’application qui, de ce fait, semble plus facile à utiliser. 
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6.4 Les icônes 


6.4.1 Construction des icônes 


Différentes règles, présentées figure 6.18, vont permettre de construire des icônes. Le 
plus souvent, la construction de l'icône s'appuie sur une combinaison de ces règles, Le 
principe directeur étant de minimiser l'effort d'interprétation. 


Règle 


Ressemblance 


Descriptif 


änalogie 


Symbolique 


ärbitraire 


Description | Exemple 
L'icône représente une image de l'objet. [E 
Livre 
l'icône représente l’action et l'objet sur lequel elle porte, voire 88 
l'objet avant et après l'exécution de là commande. 
2 pages 
Souligner 
l'icône représente des liens sémantiques avec l'objet : soit ee, 
l'objet fonctionne de manière semblable (métonymie), soit il ' 
ARE è Répertoire 
s'agit d’un glissement de sens (métaphore). 
Enregistrer 
l'icône est un symbole usuel, © 
interdit 
L'icône est une forme arbitraire, Ÿ 
Favoris 


Figure 6.18 — Règles de construction des icônes. 


Le lien entre l'icône et son référent doit être le plus direct possible. 


Pour faciliter la compréhension des icônes, il est préférable d'utiliser des picto- 
grammes concrets et familiers, comme le montre l'exemple suivant. 


Déconseillé Préférable 


Figure 6.19 — Reconnaissez-vous une horloge sur l'icône de gauche ? 
Un graphisme familier fadlite l'interprétation de l'icône. 
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La clarté de l’icône dépend de la règle de construction employée. En général, 
les icônes « descriptives » sont les plus faciles à comprendre car elles illustrent le 
fonctionnement de la commande. Au contraire, l'interprétation est plus difficile pour 
les icônes « arbitraires ». Plus le graphisme de l'icône est abstrait, plus il est difficile à 
interpréter. 


és] X = X 
wa 
Descriptif Analogique Symbolique Arbitraire 
{objet) 


Difficulté d'interprétation 


Figure 6.20 — Difficulté d'interprétation des icônes. Ici pour « couper ». 


6.4.2 Recommandations 


Dans la mesure du possible, utiliser des icônes standards. 


Afin de faciliter la compréhension des icônes, il est préférable de choisir des icônes 
standards, c'est-à-dire dont le graphisme est déjà connu des utilisateurs notamment au 
travers d’autres applications. 


Utiliser des icônes pour les objets et les commandes fréquemment employés. 


L'apprentissage des icônes est facilité par le fait que l’utilisateur les utilise fréquem- 
ment. 


Accompagner l'icône de son nom. 


Le texte précise la signification de l’icône et facilite ainsi sa compréhension. Mais le 
libellé occupe de la place à l'écran et surcharge le graphisme. Il est donc recommandé 
de prévoir un affichage à la demande par des bulles d'aide ou en option. Par exemple, 
certains logiciels permettent de choisir d'afficher ou non les textes associés aux icônes. 


Pour une icône, le texte et le graphisme ont un rôle distinct : le texte facilite la 
compréhension de l'icône, tandis que le graphisme permet de la reconnaître. 


Limiter le nombre d'icônes. 


Les expérimentations ont montré qu'au-delà de 12 icônes, leur mémorisation se 
dégrade. À partir de 20, elle devient mauvaise [Mayhew 92]. 
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Figure 6.21 — Laisser le choix de l'affichage des icônes permet à l'utilisateur 
de gagner de la place à l'écran en affichant uniquement les icônes. 


6.5 LE TEXTE 


6.5.1 Liste à puces 


La liste à puces permet de structurer le texte. Le discours en est plus clair, plus facile 
à comprendre. Les informations étant mieux hiérarchisées, elles sont également plus 
simples à mémoriser. 


Optimisez vos réglages 
Seules quelques fonctions de votre iPod sont gourmandes en énergie. Vous 
prolongerez l'autonomie de votre iPod en ne les utilisant pas. 

a Wi-Fi : La connectivité Wi-Fi consomme de l'énergie, même si vous ne 
l'utilisez pas pour vous connecter à un réseau. Vous pouvez la 
désactiver pour économiser de l'énergie. Allez dans Paramètres > 
Général > Réseau > Wi-Fi. 

e Rétroéclairage : L'activation permanente l'always on") du 
rétroéclairage a un impact conséquent sur l'autonomie de votre iPod. 
Utilisez cette fonction avec parcimonie. 

* Égaliseur : L'ajout d'une égalisation en lecture sollicite davantage le processeur de votre iPod. puisqu'elle 
n'est pas encodée dans le titre. Désactivez l'égaliseur si vous ne l'utilisez pas. Toutefois, si vous avez ajouté 
üne égalisation à des morceaux dans iTunes, il vous faudra le régier sur “plat” (flat”) pour en annuler 
l'effet, puisque votre iPod conserve intacts vos réglages iTunes. 

e Réduisez au maximum l'utilisation d'applications tierces : L'utilisation excessive, sur iPod touch, 
d'applications telles que des jeux qui empêchent l'écran de s'assombrir ou de s'éteindre est susceptible de 
réduire l'autonomie. 


Figure 6.22 — La liste à puces guide l'internaute 
dans sa lecture et structure le contenu de la page. 


L'utilisation des listes va permettre d'accélérer la lecture de la page, l'œil étant attiré 
par les puces qui jouent, en quelque sorte, le rôle de balises guidant les mouvements 


oculaires. 


Utiliser les listes à puces à bon escient. 
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ne Chapitre 6. Présenter l'information 
L'assurance de responsabilité 


Cette garaniie couvre les dommages causés à autrur Dans le cadre de vos actmtés professionnelles, de l'exploitation, de 
votre entrepnse, de la commercialisation de vos produits où de leur utilisation, vous pouvez, en effet, causer des 
dommages à vos préposés, vos clients ou liers. 

Elle concerne toutes les personnes autres que l'entreprise assurée et ses salariés. Cette garantie couvre les salanés 
pour leurs dommages non indernnisés par la Sécurité Sociale au litre des accidents du travail. Le contrat garantit 
loujours la responsabilité délictuelle ou quasi délictuelte. que les dommages soient matériels, comme la destruction de 
choses, ou corporels (blessures...}. En revanche, la plupart dés contrats ne couvrent pas la responsabilité contractuelle 
Si une extension de garantie a été prévue. Les juges considèrent en effet que là garantie Contractuelle peut valablernent 
être exclue d'une assurance de responsabilité 


X° Responsabilité Civile Exploitation (> en savoir plus) 


XX Responsabilité Crile Professionnelle 


X° Responsabilité Cmile des produits livrés (> en savoir plus) 
XX Responsabilité Civile des Dirigeants et Mandataires Sociaux (> en savoir olus) 


X! Responsabilité Civde après livraison de produits ou après prestation délivrée (> en savorr plus) 


Figure 6.23 — Ici les puces n'apportent rien à la compréhension du texte 
et surchargent inutilement la page. 


Comme tout artifice typographique, une utilisation systématique nuit à son 
efficacité. La liste à puces n'est utile que lorsque l'information peut être présentée sous 
forme d’une série d’items semblables. Si ce n’est pas Le cas, de simples paragraphes 
suffisent. 


Éviter les listes de plus de deux niveaux. 


La liste structure d'autant mieux le contenu qu'elle est simple. Au-delà de 
2 niveaux (primaire et secondaire), elle devient complexe et difficile à interpréter. 


6.5.2 Polices de caractères 


La police des caractères joue un rôle important dans le design de l'interface homme- 
machine. Cependant, sa portée est moindre que la couleur car il est plus difficile de 
différencier deux polices de caractères que deux couleurs. 


Ne pas utiliser plus de 3 polices de caractères. 


L'utilisation d’un crop grand nombre de polices rend l'écran confus ; la signalétique 
de la typographie perd son efficacité. Inversement, un faible nombre de polices facilite 
la mémorisation du codage utilisé. 


Le choix d'une police de caractères s'appuie sur deux critères : le rôle de la police 
doit être clair pour l'utilisateur et les caractères doivent être lisibles sans effort. 


Associer une police de caractères à chaque type d'objet de l'interface. 
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Une utilisation cohérente des polices de caractères est un vecteur d'harmonisation 
de l'application. À la manière du codage couleur, il convient donc de définir une 
utilisation précise des polices de caractère. 


Les textes doivent être affichés en minuscules, la première lettre étant en majuscule. 


Un texte en casse mixte est lu plus rapidement : un gain de 13 % a été observé 
par rapport au temps mis pour lire Le même texte en majuscules. En effet, les lettres 
minuscules sont moins ambiguës que les lettres majuscules. L'interprétation est donc 
facilitée et Les risques de confusion sont minimisés. 


ne mate rinirennoiv fant lhe mrnmndlne rasihrne 


FC OPTITE DINCCPTALIV PMAIÎITITE PARARINFE NNhAËNFrFEC 


Figure 6.24 — Les lettres minuscules sont plus différentes les unes des autres que les lettres 
majuscules, comme le montre la figure où la première phrase en minuscules est plus rapidement 
déchiffrable car ses signes se distinguent mieux, bien que seule là partie supérieure des lettres 
apparaisse. 


Par contre, les majuscules sont un excellent moyen de mettre en évidence un mot 
dans un texte. Un gain de 13 % a été observé lorsqu'on recherche un mot dans un 
texte et qu’il y apparaît en majuscule. 


En conclusion, les minuscules facilitent la lecture, tandis que les majuscules 
facilitent la recherche. 


Utiliser une police droite. 


Les polices droites, sans sérif, par exemple Arial, Helvetica ou Verdana, ne 
comportent pas d’empattement et présentent une graisse d'épaisseur constante sur 
tout le caractère. Ces lettres simples au dessin homogène et contrasté facilitent la 
lecture des éléments textuels à l'écran. Au contraire, pour les textes sur support papier, 
l'empattement des polices sérifiées (par exemple, Times) crée une ligne horizontale 
qui conduit l'cæil de gauche à droite. 


Utiliser des lettres sombres sur fond clair. 


Ce choix garantit un contraste optimal entre le rexte et son support, ainsi qu'une 
fatigue visuelle minimale grâce à l’utilisation d’un fond clair. Toutefois, en environ- 
nement sombre (ex : conduite de nuic), il est préférable de proposer une interface 
à contraste négatif — lettres claires sur fond sombre, afin de limiter l’éblouissement 
dû à l'écran et permettre une accommodation rapide avec le manque de luminosité 
environnant. 


Mieux vaut quelques lignes longues que plusieurs lignes courtes. 
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L'utilisation de lignes crop courtes ralentit la lecture et la rend fatigante car elle 
exige de nombreux mouvements oculaires. La lecture est plus rapide lorsque la ligne 
dépasse 26 caractères. Il est généralement recommandé d'utiliser environ 80 caractères 
par ligne. 


Aérer le texte. 


Un espacement facilite la lecture. Il est conseillé d'insérer une ligne blanche toutes 
les 5 lignes et de laisser un espace entre les colonnes. 


La norme ISO 9241-3 définit exactement les contraintes sur les polices de 
caractères pour que les textes puissent être lisibles sans effort à l'écran, comme le 
présente la figure 6.25. 


Caractéristiques du caractère Contrainte de lisibilité 


Hauteur minimale du caractère {h) h > 2,8 mm pour d = 50 cm 
en fonction de la distance de lecture (d) h > 3,5 mm pour d = 60 cm 
h > 4 mm pour d = 70 cm 


Épaisseur du trait (e) h/12<e <h/6 

Largeur du caractère (|) 0,7h<l<0,9h 

Espacement entre caractères (esp) esp>-e 

Espacement entre lignes (E) h<E<1,5h 

Matrice de points 7x9 pixels minimum 

Type de police Police droite de préférence 
italique À éviter. Inclinaison maximale : 452 


Figure 6.25 — Exigences de lisibilité des polices de caractères [SO 9241-31. 


Afin d'appliquer ces règles, on s'appuiera sur une distance moyenne de lecture à 
l'écran de 60 + 15 cm. Par ailleurs, la distance minimale généralement considérée est 
de 40 cm, en deçà, la fatigue visuelle est trop importante [ISO 9241-51. 


Utiliser une police de caractères d'au moins 11 pixels de haut. 


D'un ordinateur à un autre, d'un écran à un autre, les dimensions des lettres 
peuvent varier. Un texte d’une hauteur minimale de 11 pixels garantit une bonne 
lisibilité des caractères pour une majorité d'utilisateurs. 
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6.6 Présentation des produits pour l'e-commerce 


6.6 


6.6.1 


Une taille plus petite est acceptable pour les boutons de navigation. 


Du fait de leur position fixe, récurrente sur toute l'interface, et afin de gagner de 
la place à l’écran, il est envisageable d'utiliser un texte de plus petite taille pour les 
boutons de navigation. Ce peut également être le cas pour les informations légales ou 
contractuelles dont l'utilité pour la majorité des tâches de l'utilisateur est en général 
assez faible. 


PRÉSENTATION DES PRODUITS POUR 
L'E-COMMERCE 


Sur un site de e-commerce, la présentation des différents produits est importante car 
elle conditionne l’acte d'achat. Nous détaillons ci-dessous les différentes règles à suivre 
pour concevoir la page produit d'un site de e-commerce. 


La page produit 


Différentes études statistiques conduites sur les sites de e-commerce montrent que 
la page de présentation du produit est celle sur laquelle l'internaute passe Le plus 
de son temps. Sur cette page, il décide, ou non, d'acheter le produit présenté. La 
conception de la page produit est donc essentielle car elle détermine en grande partie 
la performance d'un site de e-commerce. 


Afficher graduellement les renseignements sur le produit. 


Les informations principales doivent être directement visibles à l'ouverture de la 
page produit : description du produit, prix, disponibilité, etc. Afin de ne pas alourdir 
visuellement la page, les informations secondaires : évaluations clients, données 
techniques, etc. sont accessibles dans un second temps par un lien « plus de détails ». 


Inciter à l'ajout au panier par un call to action fort. 


Le bouton d'ajout au panier doit apparaître de manière évidente, à proximité du 
visuel produit et dans la zone visible de l'écran (idéalement à moins de 500 pixels du 
haut de la page). Il ne faut surtout pas que l'internaute doive faire défiler l'écran pour 
trouver le bouton d'achat. 


Personnaliser la rédaction de la description du produit. 


Donner une identité rédactionnelle aux descriptions des produits permet de se 
démarquer des sites concurrents. C’est ici que le site exprime sa véritable plus-value : 
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Chapitre 6. Présenter l'information 


conseils, avantages-inconvénients, etc. Recopier la fiche constructeur donne à l’in- 
ternaute l'impression qu'il pourrait aussi bien acheter le même produit sur un autre 
site. Par ailleurs, en termes de référencement, si la description est la même sur tous les 
sites, le niveau (ranking) de la page sera plus faible. 


Indiquer en détail les informations de livraison. 


Une fois sa décision prise, l'objectif de l'internaute est de se faire livrer l’article. 
Afin de le rassurer, la page produit doit afficher clairement la disponibilité de l'article 
(stock) ainsi que les délais et tarifs de livraison. 


SOENTWIER COUDE D'ACHAT 


ZARA 


& PER: 


NOUVEAUTES « ET 


FEMME 
TRF 
HOMME 
COLECTEHI 


ENFANTS 
CAMPAIGN 
PEOPLE: 
LOOKEOOK 
EVENEMENTS 
VIDEO 


MAGASINS 
NEWSLETTER 
PRÈSSE 
ENTREPRISE 
CONTACT 


VOUS POUVEZ LE METTRE AVEC. 


[ & 


CHEMISE DIAGONALE 
CONTRASTÉE 

39.95 EUR 

Rét. 3891300 


COMPOSITION ET SONS ® ENV # 


CI= 


[rev 


REMDOURSEMENT V 


£t QUDE DE LALLES 


ancue 


Figure 6.26 — Cette page produit est un bon exemple d'équilibre visuel et de hiérarchie de 
l'information. Les éléments importants sont rapidement visibles (prix, ajout au panier) et les 
éléments complémentaires sont présents pour répondre graduellement au besoin d'information 
{composition et soins, envoi, remboursement, guide des tailles) 


Veiller à spécifier exactement l’article choisi. 


6.6 Présentation des produits pour l'e-commerce 


L'internaute doit généralement fournir des informations complémentaires qui vont 
permettre de préciser l’article qu'il souhaite (ex. : la taille ou la couleur d’un vêtement). 
Ces informations doivent être saisies avant de pouvoir « ajouter au panier ». Afin de 
fluidifier le processus d'achat, cette nouvelle interaction doit être indiquée de manière 
explicite. Deux solutions sont envisageables : 


+ Griser le bouton d’ajout au panier, expliciter au survol qu'il faut remplir 
certains champs et mettre en évidence les champs en question. Toutefois, cette 
solution risque à première vue de faire penser que l'ajout au panier n'est pas 
possible car le bouton est dans l'état indisponible. 


ape 229,00 € 


LIVRAISON ET RETOUR 
TOUJOURS GRATUITS 


Sétectionra|gine pointure 


Figure 6.27 — Au survol du bouton « Ajouter au panier », un message rappelle à l'internaute 
qu'il doit préalablement sélectionner la pointure. 


e Laisser à la fois la possibilité de cliquer et de remplir les champs. Puis, si 
les champs n'ont pas été remplis au moment de l'ajout au panier, demander 
à l'internaute de les remplir par une pop-in qui s'affiche après le clic. Cette 


seconde solution est préférable. 


Home > inieresis > Gifts for Moms > 


1 Love My Geek Babydoll Tee 


Awww.…. geek love! 
«The shirt for gesk-toving ladios 
+ Great gt for gutfriend, wite. Of even mon 
+ Black babydoil wat wivte and pirik text 
+ Aou more. 


$19.99 : mio 


Hey wait! You have choices! 


Pléasé pick an item 40 we Can magically put It in your art, 


| Please select. ni 


BUY NOW 


Figure 6.28 — La pop-in qui s'affiche après le clic sur « Ajouter au panier » permet de rappeler à 
l'internaute qu'il a oublié de préciser la taille de T-shirt souhaité, sans l'interrompre dans le 
processus d'achat. 


Éviter de sélectionner des valeurs par défaut sur la page produit. 


Dunod. 


e. 
+ 


201 


ht 


D 


Copyri 


Chapitre 6. Présenter l'information 


En règle générale, il est préférable que le client choisisse lui-même les caracté- 
ristiques de l’article qu'il achète. Il vaut mieux ne pas sélectionner par défaut une 
information qui peut être ensuite modifiée par l'utilisateur. En effet, qui voudrait une 
paire de chaussure taille 38 s’il chausse du 45 ? 


6.6.2 La zone Panier 


La zone Panier permet à l'utilisateur d'accéder au contenu de son panier. Sur un site 
de e-commerce, elle est accessible sur toutes les pages. En effet, cette zone va servir 
à afficher le contenu détaillé du panier pour ensuite effectuer la « descente » d'achat 
qui conduira au paiement. Elle doit donc être visible immédiatement et comprise sans 
équivoque. 


La zone Panier est habituellement en haut à droite de l'interface. 


Du fait de son rôle transverse par rapport au reste du contenu du site, en particulier 
par rapport au catalogue de produits, cette zone est considérée comme un « utilitaire » 
et se place en haut ec à droite de l'interface. 


La zone Panier doit indiquer au minimum le nombre de produits et le prix. 


Selon le type de site et notamment le panier moyen, la zone Panier comporte 
plus ou moins d’information. Au minimum, le nombre de produits sélectionnés doit 
apparaître, Le prix doit également être indiqué. Bien entendu, dans la mesure où 
l'adresse de livraison n'est pas connue, il s'agit d'un prix « hors livraison ». 


Lorsque le panier moyen comporte beaucoup de produits (dans l'alimentation par 
exemple}, la zone Panier devient une sorte de mini-panier permettant de modifier 
directement certains articles. 


7 MON PANIER v 


6 Articles 14,34€ 
D 1 ggMini Mern.. 2,01€ 
A Herbes de … 3,44 € 
G ! im. Les … 2,14€ 


» Enregistrer comme liste 
+ Affict ; jétail 


P TERMINER MA COMMANDE 


Figure 6.29 — Sur ce supermarché en ligne, la zone Panier présente l'ensemble des produits 
achetés et permet d'en modifier la quantité directement. 


Confirmer l'ajout au panier (retour utilisateur). 
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6.6 Présentation des produits pour l'e-commerce 


L'interface doit confirmer l’ajout au panier afin de rassurer le client et lui éviter 
de réitérer inutilement l'opération. Le retour peut être réalisé par une pop-up de 
confirmation ou par l'animation de la zone Panier. 


La pop-up de confirmation est plus explicite et nécessite une validation claire de la 
part de l’internaute pour la fermer. Ce mode de confirmation est à préférer lorsque les 
achats sont peu nombreux. Au contraire, lorsque le panier moyen comporte beaucoup 
d'articles, on choisira plutôt un changement de présentation de la zone concernée. 


Vous &rex gjouté ce produit dans votre panier : 


Twin Poglus : Sabpon 2 - Pariie À 


44 mo ons 25 


Figure 6.30 — Sur pixmania.com, une pop-up de confirmation s'affiche quand un produit est 
ajouté au panier afin de « valider mon panier » ou « continuer mes achats » 


Figure 6.31 — Sur ce site, la zone Panier s'agrandit pour confirmer l'ajout d'un nouvel article. 
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Chapitre 6. Présenter l'information 


Inciter le client à démarrer la descente d'achat. 


L'objectif est de conduire l'utilisateur à initier le processus d’achat qui le conduira 
au paiement proprement dit. Toutefois, cette incitation doit être cohérente avec le 
panier moyen attendu. 


Si le nombre d’articles du panier moyen est faible, il est envisageable d'afficher 
directement la page Panier à chaque achat, puis d'inciter l'internaute à « passer la 
commande » ou bien à « revenir au magasin ». 


Au contraire, si le panier moyen est volumineux (en nombre d'articles, sites 
d'alimentation par exemple}, un bouton « terminer la commande » s'affiche dans 
la zone Panier accessible sur toutes les pages du site. Dans ce cas, l'incitation est moins 
forte. L'utilisateur décide lui-même du moment où ses achats sont terminés. 


6.6.3 La page Panier 


La page Panier est un récapitulatif des différents articles sélectionnés par le client. Elle 
lui permet de vérifier globalement l’ensemble de sa commande. L'objectif est ici de le 
rassurer sut Le contenu de son panier et lui permettre éventuellement de le modifier. 


Limiter le nombre de liens et d'interactions possibles. 


Cette étape du parcours d'achat est essentielle car c’est ici que commence la 
« descente d'achat » qui va conduire le client au paiement. Plus qu'ailleurs, il convient 
donc de ne pas perdre l'utilisateur et de limiter les alternatives de navigation. 


Sur cette page, le client s'attend à : 
e Terminer sa commande 

e Modifier son panier 

e Continuer ses achats 


s 


Éventuellement, il peut être intéressant de proposer à ce stade des produits 
complémentaires (cross-selling) si cela n'affecte pas la clarté de la page. 


Afficher immédiatement les mises à jour du panier. 


Lorsque l'internaute modifie un article sur la page panier (par exemple, un 
changement de quantité}, le résultat sur le montant final de La commande doit 
s'afficher immédiatement. Le bouton « recalculer » est généralement mal compris 
par les utilisateurs et donc source d'erreur. 


Éviter l'impasse du panier vide. 
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Un mage, Un corp. Ok 
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PR LAN CUAITTE CLR 


Le Tshirt rayé Le Club Jules 
Coins Bordagun Fantgines 35090 - tes de: fer LE L Jus 


CL 
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eut 
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UN EMBALLAGE CACEAU ? 
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See le men pie 
Ervare Per Der » ei 


Figure 6.32 — La page panier de Jules.fr est un bon exemple de panier clair, sans surcharge 
visuelle. 


Si le panier est vide, la page panier ne doit pas être vide. Au contraire, elle doit 
inciter le client à retourner faire des achats sur Le site. Dans ce cas, la page panier 
explique que le panier ne contient aucun produit et offre des solutions de sortie : 
arborescence du catalogue, produits consultés, etc. 


y _Dartcies 
JuntiE LL 
Acheter Participer. Communauté Infos- © OR © | 


Buy 525 worth of stuff, and we'll take 25% off at checkout. 


Your cart is empty! 


= ['m 50, so hungry! Have mercy 
and fill my carty belly with delicious 
Threadless products. You can use 
the drop-downs above my starving 
body to get started. Hurry! 


O O 


Figure 6.33 — Lorsque le panier est vide, le site Threadless propose deux boutons 
pour accéder facilement au catalogue de produits. 
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6.7 CAS PRATIQUE : UNE DÉMARCHE ERGONOMIQUE 
POUR CONCEVOIR UN NOUVEAU TERMINAL DE 
VENTE 


6.7.1 Un nouvel outil pour un nouveau métier 


Depuis quelques années, Le métier du buraliste évolue. Un magasin de détail, bureau 
de tabac ou marchand de journaux, n’est plus simplement un lieu pour acheter des 
produits « sur étagère » : cigarettes, presse, jeux, etc. Le commerçant peut désormais 
vendre des produits « dématérialisés » : cartes téléphoniques, timbres amendes, etc. 
voire même des prestations de services : places de spectacle, transfert d'argent à 
l'étranger, etc. Il se positionne comme un commerce de proximité d’un nouveau type. 


Ce changement profond a conduit Alcadis Distribution France à concevoir un 
outil novateur destiné à accompagner les buralistes dans la mutation de leur métier. 


Afin de limiter les risques dans la phase d'innovation et de s'assurer d’une 
adéquation du nouvel outil avec la réalité quotidienne du métier des buralistes, Altadis 
Distribution France à souhaité mettre en œuvre une démarche ergonomique pour 
concevoir et spécifier son nouveau terminal de vente, 


6.7.2 Une conception centrée sur l'usage 


Nous avons tout d’abord conduit une étude auprès d'un panel représentatif de 
détaillants. Cette étude nous a permis d'appréhender précisément les contraintes 
ergonomiques liées aux spécificités du métier et aux différents profils utilisateurs. 


Figure 6.34 — Une analyse de la tâche quotidienne des buralistes à permis de construire 
l'interface sur des bases concrètes 


13 Dunod. 


) 


20 


6.7 Cas pratique : une démarche ergonomique pour concevoir un nouveau terminal de vente 


6.7.3 Des ateliers de co-création avec les équipes marketing 


S'appuyant sur l'expression de besoin et l'analyse terrain effectuée précédemment, 
nous avons conçu des maquettes de l'interface du nouveau terminal de vente. Des 
ateliers de travail avec les équipes marketing et commerciales ont permis d’affiner 
progressivement l'ergonomie des maquettes pour optimiser les manipulations quoti- 


diennes du buraliste. 


Strator Hstorque 
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Figure 6.35 — Maquette fil de fer interactive réalisée à l'issue des ateliers 


6.7.4 Un design épuré et novateur 


Sur la base des maquettes, nous avons réalisé les écrans des nouveaux terminaux de 
vente. Deux principes ont guidé la conception de cette nouvelle interface : Intuitivité 


et Productivité. 


6.7.5 Une utilisation quotidienne intensive 


Au final, le nouveau terminal de vente, qui a été lancé début 2011, sera utilisé par 
plus de 10 000 détaillants dans toute la France. Il permet de réaliser plusieurs millions 
de transactions par jour. Les premiers tests piloces conduits fin 2010 ont montré un 
gain de productivité d'environ 30 % et l'ambition de s’élargir à d’autres commerces de 


proximité. 
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Figure 6.36 — Interface de l'application finale 


« Dans un secteur très concurrentiel notre analyse était que dans le cadre de la 
redéfinition de notre produit une réponse fonctionnelle seule n'était pas suffisante et 
qu'une ergonomie, un design soigné et « donnant envie » nous fournirait un avantage 
concurrentiel appréciable. 


La collaboration avec une équipe ergonome-designer, dans le cadre d'un développement 
« Agile » a été particulièrement fluide, les exigences métier ayant été enrichies au fil de 
l'eau des exigences ergonomiques. 


Le produit a été accueil très positivement par les buralistes ravis de découvrir qu'ils 
peuvent prendre la main sur leur nouveau terminal en moins d'un quart d'heure ! » 


François-Xavier TREUILLE 
Responsable Marketing Altadis Distribution France 
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« Le seul véritable changement que nous pouvons faire au processus de développement est de 
concevoir complètement les produits interactifs avant de commencer toute programmation. » 
Alan Cooper!, About Face 2.0, juillet 2003. 


7.1 Conception orientée utilisateur 
7.2 Analyse 


7.3 Conception 


7.4 Évaluation ergonomique . ........ eo 


7.5 Derniers conseils 


7.1 CONCEPTION ORIENTÉE UTILISATEUR 
7.1.1 Les étapes de la conception 


La démarche de conception orientée utilisateur consiste à mettre en place un 
processus itératif s'appuyant sur l'analyse de l'expérience utilisateur, c’est-à-dire 
le comportement et les retours des utilisateurs lorsqu'ils se servent réellement de 
l'application. 


L. Alan Cooper est l'inventeur du Visual Basic. Il est expert en conception logiciel orientée 
utilisateur et concepteur de la méthode des Personas. 
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Chapitre 7. Méthodes de conception des interfaces 


Analyse —=—;> Conception ———;> Évaluation 


Figure 7.1 — Les trois phases de la démarche de conception orientée utilisateur. 


On distingue habituellement crois phases dans la démarche : 


1. Phase d'analyse 


Cette première étape vise à préciser les attentes et le besoin des utilisateurs 
finaux. Elle permet de prendre connaissance de la tâche réelle des utilisateurs et 
d'analyser Le contexte dans lequel ils effectuent, ou vont effectuer, cette tâche. 
La phase d'analyse permet de préciser l'utilité recherchée par les utilisateurs de 
l'application. 


2. Phase de conception 

Sur la base des éléments recueillis dans la phase d'analyse, une première 
maquette de l'interface est conçue. Cette maquette résulte, d’une part de 
l'analyse de la tâche des utilisateurs et des spécificités du contexte de travail, 
et d'autre part des principes d’ergonomie des interfaces (présentés dans les 
chapitres précédents) ainsi que des standards d'interface du domaine. 

Cette première maquette évoluera ensuite en fonction des retours de la phase 
d'évaluation. Comme nous le verrons plus bas, il s'agit dans un premier temps 
d'une ébauche de l'interface qui sera complétée et raffinée à chaque itérarion. 


3. Phase d'évaluation 


La phase d'évaluation consiste à mesurer l’utilisabilité de l'application. Pour 
cela, différentes méthodes peuvent être mises en œuvre. La principale méthode, 
le cest utilisateur, consiste à placer l'utilisateur en situation d'utilisation réelle 
du produit et à observer les difficultés rencontrées. 

L'évaluation permet d'identifier les points à améliorer sur la maquette et donc 
de préparer la version suivante qui sera à nouveau testée et ainsi de suite. 
L'expérience montre que deux à trois itérations suffisent en général pour 
finaliser la conception de l'interface. 


Nous présentons ci-après les principales méthodes qui peuvent être mises en œuvre 
pendant les différentes étapes de la démarche de conception orientée utilisateur. 
Pour une description détaillée de ces méthodes, Le lecteur pourra consulter l'ex- 
cellent ouvrage de Thierry Baccino, Catherine Bellino et Teresa Colombi : « Mesure 
de l'utilisabilité des Interfaces » [Baccino 05], ainsi que celui d'Alan Cooper et 
Robert Reimann : « About Face 2.0 » [Cooper 03] pour la méthode des personas. 
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Qu'il s'agisse de concevoir l’interface d’un logiciel, d'un site web, d’une application 
tactile ou smartphone, la démarche et les méthodes sont similaires. Pour un logiciel, 
la phase d'analyse permet d'identifier les fonctionnalités à mettre en œuvre, tandis 
qu'elle sert à préciser les services attendus pour un site web. Dans chaque cas, la phase 
d'analyse vise à définir l'utilité du produit. 


L'étape de conception permet ensuite de construire la structure de menus et le 
découpage en fenêtres du logiciel, ou bien l'arborescence de pages du site web. Dans les 
deux cas, les méthodes de maquettage permettent de raffiner progressivement la fidélité 
du prototype et d'améliorer progressivement l'interface par itérations successives. 


7.1.2 Les affres de la conception web 


Sous une apparente simplicité, la conception d'un site cache de nombreuses difficultés 
liées au fait qu'il s’agit d’une technologie transverse : « plate-forme de convergence 
entre l'informatique, les télécommunications et l'audiovisuel » [Abramatic 99]. 


Le développement web est en particulier un domaine au carrefour de la communi- 
cation, du marketing, de l’informatique, de l’infographie et de l’utilisabilité. C’est un 
processus aux multiples facettes, faisant appel à des compétences variées. [l s'appuie 
sur des équipes pluridisciplinaires où les différents métiers sont représentés. 


Processus 
de mise äàjour ; , 
Rédaction Expertise 
Ciblage du contenu du domaine 
Évaluation Développement 
ergonomique informatique 
Site Web 
Configuration 
Copyright matérielle 
et réseau 
Stratégie Design 
commerciale Sécurité graphique 


Figure 7.2 — La création d'un site 
est un travail d'équipe faisant appel à des compétences variées. 


C'est la conjugaison des talents de chacun des membres de l’équipe qui permet 
d'obtenir le meilleur résultat. Pour cela, les principales disciplines intervenant dans la 
conception d’un site doivent être représentées au sein de l'équipe. 
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7.1.3 L'utilisateur moyen n'existe pas 
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Nous avons tous connu ces réunions épiques où chaque membre de l'équipe défend 
âprement son point de vue sans qu'aucun n’emporte l'adhésion des autres [Krug 01]. 


Mais pourquoi les réunions d'avancement ressemblent-elles plus à des débats 
politiques qu'à des réunions de projet ? La raison en est simple : nous sommes tous 
des utilisateurs. De ce fait, nous avons naturellement tendance à penser que tous les 
utilisateurs nous ressemblent et donc qu'ils apprécient le web de la même façon que 
nous. Chacun est persuadé d’avoir raison et de détenir la vérité puisqu'il est lui-même 
un utilisateur. 


Certains vont jusqu’à évoquer l'existence d'un « utilisateur moyen » ! En effet, 
partant du principe que les utilisateurs sont des individus comme vous et moi, 
l'utilisateur moyen serait une sorte d'être humain standard, un individu à la fois comme 
vous et moi, Dès lors pour concevoir correctement un site, il suffirait de connaître ce 
que cet utilisateur aime ou n'aime pas. 


Malheureusement, c’est un mythe ! Il n'existe pas d'utilisateur moyen. Nous 
sommes tous différents et chacune de nos expériences en tant qu'utilisateur est unique. 


Dans l'absolu, il n'y à pas de bon site web ou de meilleur logiciel. L'utilisabilité 
du site dépend à la fois de l'utilisateur et du contexte dans lequel il s'en sert. Il 
n'existe pas de design « prêt à porter », chaque solution est unique et doit être conçue 
« SUr-INesUre ». 


C’est l'objectif de La démarche ergonomique de conception que d'adapter le site à 
son utilisateur et au contexte dans lequel il est conduit à le visiter. Elle consiste dans 
un premier temps à déterminer précisément le contexte d'utilisation, c’est-à-dire cibler 
le site en déterminant le couple « utilisateur-utilisation » : Quel est l’utilisateur visé ? 
Que cherche-t-il à faire sur le site ? 


Puis dans un second temps, il s’agit de structurer le site selon le point de vue 
des utilisateurs visés, et non selon celui de l’équipe de conception comme c’est trop 
souvent le cas. 


Finalement, il importe de tester le plus rapidement possible avec les utilisateurs afin 
de pouvoir appuyer les choix de conception sur des faits objectifs issus de l'observation 
réelle des utilisateurs du site. 


Grâce au test utilisateur, on quitte Le domaine du subjectif. Le test permet 
d'appuyer les choix sur des éléments concrets et objectifs. Il rationalise des réunions 
généralement houleuses, souvent stériles et génératrices de conflits. 


7.2 ANALYSE 


Les méthodes présentées ci-après sont les plus fréquemment utilisées pour préciser les 
attentes des utilisateurs. L'enquête ou l'interview utilisateur consiste à questionner 
individuellement un panel représentatif de la population visée par l'application. 
Au contraire, Le focus group est une méthode d’animation qui présente l'intérêt de 
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s'appuyer sur la dynamique d’un groupe d'utilisateurs pour identifier l’image collective 
du produit. La modélisation de la tâche permet, comme son nom l'indique, de 
construire une représentation de la manière dont l'utilisateur réalise la tâche pour 
laquelle est conçue l'application, ce modèle servira ensuite de support à la conception 
du système de navigation. 


Enquête/interviews utilisateur 


L'enquête utilisateur vise à recueillir les besoins et Les attentes des utilisateurs vis-à-vis 
du produit : les fonctionnalités qui leur seraient utiles, les services attendus, etc. 
L'enquête est conduite sous forme d’interviews, c’est-à-dire d'entretien individuel 
en « face à face ». Elle permet d'établir les principes directeurs qui vont guider la 
conception de l'interface. 


Le contenu de l’interview proprement dit, les questions posées, dépendent étroi- 
tement de l'objectif poursuivi. Au démarrage du projet, on s'intéresse aux attentes 
des utilisateurs, à leurs souhaits, aux informations qu'ils aimeraient trouver sur l'écran. 
Puis, lorsque la définition des besoins est plus avancée, l'interview peut se focaliser 
sur des questions plus précises en termes d'usage. Elle peut également permettre de 
recueillir Les retours des utilisateurs sur une maquette lorsque celle-ci a été réalisée. 


L'interview est une méthode d’analyse qualitative. Les données recueillies sont 
subjectives car elles s'appuient sur l'opinion de l'utilisateur et non sur ce qu'il fait 
réellement. Il serait donc illusoire de vouloir en tirer des données chiffrées, mais il 
permet d'identifier les tendances et surtout de prioriser Les besoins des utilisateurs. 


Panel utilisateur 


Les utilisateurs qui participeront aux entretiens doivent être représentatifs de la 
population visée. Selon le domaine, les critères à prendre en compte sont l’âge, le 
genre, l'expérience métier, la catégorie socioprofessionnelle (CSP}, voire d'autres 
critères spécifiques selon le projet. 


Un panel d’une dizaine de personnes environ permet généralement de recueillir des 
données qualitatives suffisamment représentatives. Toutefois, lorsqu'il existe des profils 
d'utilisateur nettement différents, une proportion d’utilisateur de chaque profil est 
nécessaire, par exemple, pour un site marchand, le panel est généralement constitué 
de cinq utilisateurs connaissant le site et de cinq autres ne le connaissant pas. 


Protocole et logistique 


Les participants sont interviewés individuellement. Pour les applications profession- 
nelles, en particulier Les intranets ou les systèmes d’information, il peut être intéressant 
de conduire les interviews directement sur le lieu de travail de l'utilisateur afin 
de mieux comprendre le contexte dans lequel l'application est utilisée. Toutefois, 
disposer d’un local calme et isolé est préférable car il permet de mener l'interview sans 
perturbation extérieure. Lorsque l’activité des utilisateurs est importante, par exemple 
pour une application de support téléphonique, il est préférable de scinder l'interview 
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en deux étapes : d'une part des observations directement sur le lieu de travail avec un 
questionnement minimal, d’autre part des interviews proprement dit à l'extérieur de 
l'espace de travail. 


En phase d'analyse, l'interview est menée selon un mode semi-directif afin de 
privilégier un certain degré de liberté dans les réponses et de permettre une démarche 
exploratoire. L’enquêteur pose donc des questions ouvertes en veillant à ne pas 
influencer le participant par son attitude, ses intonations où la manière dont la 
question est formulée. 


Afin de ne pas biaiser l'interview, il est important que l’enquêteur ne soit pas 
impliqué dans le projet. L'entretien ne doit pas être un échange de points de vue, une 
discussion entre le participant et l’enquêteur. Ce dernier ne doit pas faire part de son 
opinion. Il doit rester le plus neutre possible afin de ne pas influencer Les réponses. 
Son rôle consiste à poser les questions et relancer le participant afin de recueillir Les 
informations les plus complètes possible. Il veillera à reformuler les réponses afin de 
vérifier qu'il a correctement compris Le point de vue de l'utilisateur. 


Selon les objectifs de l'interview, certaines questions peuvent être posées selon 
une approche directive afin d'obtenir des réponses plus précises vis-à-vis de certains 
éléments de l'interface par exemple (« Aviez-vous remarqué ceci?» en montrant 
l'élément en question). Au contraire, pour d’autres points, on laissera l'utilisateur 
s'exprimer plus librement en adoptant une démarche non directive, par exemple : 
« Qu'avez-vous apprécié sur ce site ? » 


Afin de pouvoir reproduire les différentes interviews dans les mêmes conditions 
et s'assurer que l’ensemble des points identifiés a été balayé lors de l'interview, il 
est conseillé de construire une grille de questions où sont notés les différents points 
abordés lors de l'interview. 


Idéalement, les interviews ne devraient pas durer plus de 45 minutes car au-delà 
la qualité des échanges diminue. Toutefois, l'expérience montre que les interviews 
durent généralement plus d’une heure. 


En termes de matériel, Le seul outil employé lors de l'interview est un magné- 
tophone car il permet de se consacrer uniquement à l’entretien et de ne pas se 
soucier de la prise de notes qui monopolise une partie de l'attention de l’enquêteur. 
L'enregistrement offre l'avantage de garder une trace de l’ensemble de l'entretien. 
Toutefois l'analyse de l’ensemble des enregistrements, la réécoute complète, prend 
du temps. Il est souvent plus rapide de prendre des notes succinctes et de consulter 
uniquement certaines parties de l'enregistrement afin de vérifier ou compléter certains 
points 


7.2.2 Focus group 


Le focus group est une méthode d'enquête qui vise à recueillir l'opinion des utilisateurs 
sur un produit ou un concept. Elle permet de mieux comprendre les motivations des 
utilisateurs et l’image qu'ils se font du produit. Contrairement aux autres méthodes 
présentées, elle se pratique avec un groupe de participants : utilisateurs ou futurs 
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utilisateurs de l'application. Le focus group permet uniquement de recueillir des 
éléments subjectifs, et non des données objectives sur l'usage de l'application comme 
le test utilisateur, par exemple. 


Les points abordés lors d'un focus group dépendent des objectifs définis au préalable 
avec l’équipe projet, et des informations qu'elle souhaite recueillir. En fonction de ces 
objectifs, la trame du focus group est définie sur la base des différents thèmes (cinq ou 
six en général) qui seront abordés lors de la séance. 


Chaque thème identifié fait l’objet soit d’une discussion de groupe, soit d'une 
activité spécifique. Par exemple, pour identifier les motivations des utilisateurs ou les 
faire réagir sur un nouveau design, on procédera par questionnement. Par contre, s’il 
s'agit de concevoir une nouvelle interface, il peut être intéressant de demander aux 
participants de réaliser en petits groupes une maquette de l'interface « idéale » qu’ils 
présenteront ensuite aux autres personnes. 


Plusieurs focus groups peuvent être conduits afin d'obtenir différents points de vue 
et de compléter au fur et à mesure les résultats obtenus. Il est recommandé de s'appuyer 
sur les résultats des focus groups précédents pour enrichir le contenu de la séance de 
travail et éviter de revenir sur des thèmes déjà abordés. 


Le panel utilisateur doit répondre aux caractéristiques du cœur de cible, Si les 
mêmes thèmes sont abordés d'une séance à l'autre, il est préférable de mixer de 
manière équilibrée différents profils dans chaque groupe. Toutefois, selon les objectifs, 
il peut aussi être intéressant de construire des focus groups autour d’un même profil, 
qui sera, par exemple, le seul à être intéressé par la partie du site craitée lors de la 
séance. Ou bien, si la question est de déterminer les motivations de chaque segment 
de la cible à venir visiter le site, il est également préférable de construire des groupes 
par segment. 


En règle générale, on conseille de ne pas dépasser sept utilisateurs par focus group. 
Au-delà certains utilisateurs, plus timides, risquent de ne pas s'exprimer. 


Animation du focus group 


Un focus group se déroule en trois temps : une phase d'introduction où l'animateur 
présente les objectifs de la séance, une phase de réalisation pendant laquelle sont 
abordés les différents thèmes identifiés et une phase de clôture qui permet de faire une 
synthèse. 


Dans un premier temps, il est d'usage d’initier le focus group par une animation 
destinée à « briser la glace » afin de renforcer la cohésion du groupe et donc 
stimuler les interactions ultérieures. L'objectif de ce premier exercice est de permettre 
aux participants de faire connaissance afin de s'exprimer ensuite plus facilement. 
On veillera toutefois à ne pas consacrer trop de temps à l'activité « brise-glace ». 
Eventuellement, il est possible de se servir d’un des thèmes du focus group, par 
exemple : « Racontez-nous votre expérience avec le site ou l'application... ? ». 


Au début de la séance, on précise également les « règles du jeu ». L'objectif est 
de permettre à chacun de s'exprimer : « pas de censure », « laisser parler les autres », 
« écoutez », « chacun parle à son tour », « tout ce qui est dit est a priori intéressant », 
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etc. Il peut être intéressant de noter ces règles sur un paper-board visible de tous afin 
éventuellement de pouvoir s'y référer en cours de séance. Notons d’ailleurs que la 
constitution de cet ensemble de règles est aussi un bon moyen de briser la glace. 


On veillera ensuite à proposer des exercices de difficulté croissante en commençant 
par des consignes simples, voire des associations d'idées, puis en se focalisant sur 
certains thèmes spécifiques du produit au fur et à mesure de l’avancement de la séance. 
Le produit sur lequel porte le focus group est présenté progressivement et les questions 
se font plus précises. 


En principe, il est préférable de se limiter à deux heures de focus group, mais il 
arrive souvent que la séance dure plus longtemps. 


Le rôle de l'animateur consiste à relancer le débat, reformuler les réponses et 
recadrer lorsque le groupe s'éloigne de la consigne. Il veillera à ce que chacun puisse 
s'exprimer. Il pourra éventuellement relater des éléments issus des groupes précédents 
pour relancer le débat. Comme pour les autres méthodes proposées ici, l'animateur 
reste le plus neutre possible vis-à-vis des opinions émises afin de ne pas influencer les 
participants. 


À la fin de chaque activité, il veillera à synthétiser Les résultats. Il peut d'ailleurs se 
faire aider par le groupe pour cela. Lors de la phase de clôture, les différents résultats 
sont repris et présentés aux participants. Îl est clairement demandé aux participants de 
valider les différents résultats afin de disposer d’un matériel tangible. Cette dernière 
étape prend généralement un certain temps, car de nouveaux points peuvent être 
évoqués à la lumière de l’ensemble du travail réalisé, ou bien certaines réserves faire 
l'objet de discussions dans le groupe. 


Des paper-boards dans la salle permettent à l'animateur de synthétiser, au vu de 
tous, les différentes opinions qui ont été émises. Ces supports pourront également 
servir, lors d’un travail en groupe, à illustrer ou proposer des schémas d'interface. 


Afin de pouvoir analyser les résultats du focus group, il est utile d'enregistrer le 
déroulement de la séance, De plus l'animateur étant très occupé à conduire les débats, 
on prévoit habituellement une seconde personne qui va jouer le rôle de secrétaire de 
séance et noter les réactions des participants. 


Le focus group : un outil de créativité. 


Le focus group est particulièrement intéressant en phase d'analyse pour initier la 
conception d’une interface ou d’un nouveau site car il permet de mieux comprendre 
l'image perçue du produit. Il permet d'identifier les motivations, les préférences, les 
attentes et les priorités des utilisateurs visés. 


Les idées nouvelles, émises lors du focus group, peuvent être discutées et approfon- 
dies en commun, ce qui n’est pas Le cas lors d’un entretien individuel. Cette méthode 
peut également être utilisée en phase d'évaluation afin de recueillir les réactions des 
utilisateurs sur une maquette de l'interface, mais dans ce cas, elle ne sera pas aussi 
efficace qu'un test utilisateur car il ne s'appuie pas sur la mise en situation réelle des 
utilisateurs. 


7.2 Andlyse 


7.2.3 Modélisation de la tâche 
Analyse de la tâche 


Pour un site web, les interviews permettent de préciser l'attente des utilisateurs, l’image 
qu'ils se font de l’entreprise et des services qu’elle propose. Pour une application 
logicielle, les questions se concentrent généralement sur les fonctionnalités attendues 
ec sur la façon dont les utilisateurs effectuent l'activité pour laquelle le logiciel est 
développé. La méthode employée pour cela est celle dite de « l'analyse de la tâche ». 


On procède pour cela en deux étapes. Tout d'abord, des interviews permettent 
d'identifier la tâche prévue ; ce qui doit être fait. Cette première analyse est ensuite 
consolidée par l'observation des utilisateurs sur leur lieu de travail afin de pouvoir 
modéliser l’activité effectivement réalisée. 


En recoupant les informations issues des interviews et celles observées lors de 
l'utilisation effective de l'application, il est possible de construire un modèle de 
la tâche identifiant les buts de l’utilisateur et la manière dont il les atteint, ainsi 
que les informations qui lui sont nécessaires pour cela. Les observations permettent 
également d'identifier La façon dont l'utilisateur traite les cas exceptionnels, voire les 
urgences dans le cas des applications « à risque ». De plus, lorsque le logiciel vient en 
remplacement d’un autre, il est intéressant de profiter de ce premier contact avec les 
utilisateurs pour collecter leur point de vue sur Le système qu'ils utilisent actuellement. 


Dans le cadre du développement logiciel, l'analyse de la tâche permet de structurer 
l'interface homme-machine. Le découpage en fenêtres dérive en grande partie de 
l'architecture de la tâche et de la façon dont l'utilisateur mène les différentes sous- 
tâches. La connaissance des informations nécessaires à la réalisation de chaque tâche 
permet de définir le contenu de chaque fenêtre. 


Analyse de la situation de travail et choix de conception 


Lors des interviews utilisateurs, différents éléments liés au contexte d'utilisation de 
l'application vont être recueillis afin d'ajuster le logiciel à la population ciblée. En 
particulier, on s’intéressera aux connaissances informatiques de l'utilisateur et à son 
expérience du domaine applicatif, afin de déterminer le type de guidage que devra 
offrir le logiciel. Les caractéristiques de la tâche réalisée avec le logiciel entrent 
également en ligne de compte : Quelle est la fréquence et la durée d'utilisation du logiciel ? 
La tâche est-elle structurée ? Une formation est-elle prévue ? Ces différents éléments vont 
contraindre la conception de l'interface homme-machine et permettre de choisir le 
mode de dialogue le mieux adapté à la situation de travail. 


Si le logiciel est utilisé de façon occasionnelle, on favorisera la facilité d’appren- 
tissage en donnant un accès aux commandes par des menus déroulants. Au contraire, 
si les contraintes temporelles sont fortes, on privilégiera la rapidité d'exécution en 
utilisant des touches de fonction. De cette manière, il est possible de justifier les choix 
de conception sur la base des éléments recueillis lors des interviews. 


L'analyse de la situation de travail aide la conception de l'interface homme- 
machine. Ainsi, la question se pose fréquemment de savoir s’il convient de privilégier 
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la rapidité d'utilisation ou la facilité d'apprentissage. La figure 7.3 donne des éléments 
de décision. 


Caractéristique de la situation de travail Contrainte de conception 
Apprentissage approfondi Rapidité d'utilisation 
Aucun apprentissage préalable Facilité d'apprentissage 
Utilisation fréquente de longue durée Rapidité d'utilisation 
Utilisation de courte durée ou peu fréquente Facilité d'apprentissage 


et de mémorisation 
Utilisation obligatoire Rapidité d'utilisation 


Utilisation choisie Facilité d'apprentissage 
et de mémorisation 


Tâche importante (donc motivation forte Puissance, rapidité d'utilisation 
et apprentissage approfondi) 


Tâche peu importante (ou motivation faible) Facilité d'apprentissage 
et de mémorisation 


Figure 7.3 — Le choix de privilégier la rapidité d'utilisation ou la facilité d'apprentissage s'appuie 
sur les caractéristiques de la situation de travail de l'utilisateur. 


Méthode des incidents critiques 


Afin de se focaliser sur les points faibles et les points forts de l’application existante, 
il est intéressant de questionner les utilisateurs sur les incidents qu’ils ont rencontrés 
lorsqu'ils se sont servis du logiciel ou du site. 


Cette méthode dite « des incidents critiques » présente l’intérêt d'identifier Les 
aspects du logiciel qui ont été source d'erreur, tout comme d’ailleurs les points jugés 
positifs par les utilisateurs. 


La démarche consiste à demander aux utilisateurs de décrire une situation où ils se 
souviennent avoir rencontré des problèmes. Faisant appel à la mémoire des utilisateurs, 
la méthode des « incidents critiques » permet de se focaliser sur les problèmes, et les 
avantages, ressentis comme tels par les utilisateurs. 


L'intérêt de cette méthode est de s’appuyer ainsi sur la description des faits réels 
vécus par les utilisateurs. Toutefois dans la mesure où elle s'appuie principalement 
sur la façon dont les utilisateurs se souviennent des événements, elle peut être source 
d'erreur ou de mauvaise interprétation. 


C'est pourquoi, il est utile de disposer lors de l'entretien d'une version du logiciel 
ou du site afin de pouvoir demander à l’utilisateur interviewé de simuler la situation 
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7.3 


7.3.1 


qu'il relate. Des enregistrements d'écran seront alors utiles pour garder une trace des 
problèmes évoqués. 


La démarche des « incidents critiques » permet de recueillir à la fois les points 
négatifs qu’il faudra corriger et les points positifs qu'il faudra au contraire maintenir et 
renforcer le cas échéant. 


CONCEPTION 


Trois méthodes sont généralement employées dans la phase de conception pour 
élaborer les spécifications de l'interface qui serviront ensuite de base au développement 
de l'application. 


Les personas fournissent des archétypes d'utilisateur qui vont guider la conception 
détaillée de l'interface. Le tri par carte permet d'organiser le contenu de l'application. 
Tandis que le maquettage vise à construire l’interface de manière itérative. 


Personas 


La méthode des personas permet de construire des archétypes des utilisateurs de 
l'application à la manière des personnages d’un film ou d'une pièce de théâtre, auxquels 
les concepteurs pourront se référer lors du design de l'interface. Cette méthode unique 
couvre à la fois les phases d'analyse et de conception. 


La méthode des personas peut sembler surprenante car, comme nous l'avons évoqué 
au-dessus, il n'existe pas d'utilisateur moyen et il serait illusoire de vouloir se mettre à la 
place de l'utilisateur, et pourtant c'est ce que semble proposer la méthode des personas. 
C'est d’ailleurs la raison pour laquelle elle est souvent mal comprise. 


En fait, les personas sont construits sur la base d'une étude précise des objectifs et 
des motivations de la population visée par l'application. Cette étude ethnographique 
va permettre d'élaborer plusieurs archétypes d'utilisateurs appelés personas. Les perso- 
nas ne correspondent pas à des profils d'utilisateur ou à une segmentation marketing, 
ils résultent de la synthèse des données collectées dans une phase de recherche initiale. 
Les personas constituent donc une modélisation fable des utilisateurs finaux car ils 
s'appuient sur des données concrètes issues d’une étude précise de la population cible. 


Construire les personas à partir de données comportementales concrètes. 


La construction des personas se fait en deux étapes : dans un premier temps, 
une série d’interviews auprès d'un panel d'utilisateurs vise à collecter un ensemble 
de données constitutives des futurs personas, c'est la phase dite « de recherche » 
[Cooper 03], puis une seconde étape d’agrégation de ces données permet de construire 
les personas proprement dits. 


La phase de recherche consiste à conduire des entretiens auprès d'un panel de six 
à huit utilisateurs du cœur de cible. Les entretiens sont conduits selon la méthode de 
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l'enquête contextuelle [Baccino 05]. L'incerviewer se place en position d’apprenti 
et cherche à comprendre comment l'utilisateur réalise la tâche sur l'application 
considérée. Il alterne des observations afin de recueillir des informations sur le 
contexte dans lequel la tâche est réalisée, avec des questions par lesquelles il cherche 
à identifier les objectifs et les motivations de l'utilisateur. 


Chaque interview dure 1 à 2 heures et se déroule sur le lieu de travail de l'utilisateur. 
Dans le cadre de cette méthode, l'interview vise à découvrir les objectifs et les 
motivations des utilisateurs de l'application. Les données echnographiques ainsi 
recueillies serviront ensuite à construire les personas. 


Afin d'orienter les entretiens, on formule dans un premier temps une hypothèse 
sur le profil des utilisateurs de l'application, et par là même sur les personas (persona 
hypothesis [Cooper 03]). La phase de recherche est construite de manière à recueillir 
des données par rapport à cet ensemble de caractéristiques. 


Les caractéristiques des utilisateurs sont variables selon l'application, mais elles 
recouvrent en général Les points suivants : 

e Le type d'utilisateur : âge, genre, profession, catégorie socio-professionnelle, etc. 

e Leurs besoins ou leur motivation vis-à-vis de l'application. 


Les critères de choix. 


La façon de se servir de l'application. 


L'expertise du domaine. 


L'hypothèse du persona est élaborée en relation avec les équipes marketing sur la 
base de la segmentation de la population cible et des spécificités de l'application. Dans 
cette étape, il est important d'identifier des caractéristiques clairement distinctes pour 
lesquelles il est possible de définir une échelle de valeurs selon les utilisateurs. 


Cet ensemble de caractéristiques va servir de ligne directrice aux interviews. 
L'objectif est, au final, de pouvoir positionner chacune des personnes interviewées au 
regard des différentes caractéristiques étudiées. 


Une fois la phase de recherche terminée, la construction de personas proprement 
dite peut commencer. Il convient, dans un premier temps, de vérifier que l'hypothèse 
des personas est validée au regard des données récoltées. Si des éléments comportemen- 
taux nouveaux ou bien des caractéristiques spécifiques des utilisateurs sont apparus 
au cours des interviews, l'ensemble des caractéristiques initiales est modifié et des 
interviews complémentaires doivent éventuellement être effectuées afin d'obtenir les 
données manquantes. 


Les personas sont un modèle comportemental de l'utilisateur final. C'est pourquoi, 
les variables comportementales doivent être isolées des autres variables analysées 
lors des interviews, en particulier les variables démographiques (âge, expérience du 
domaine, lieu d'habitation, etc.). 


Pour une application informatique, une vingtaine de variables comportementales 
sont généralement récoltées [Cooper 03]. Le profil de chaque personne interviewée 
est ensuite positionné au regard des variables comportementales. 
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Par exemple, pour un site de commerce en ligne, trois variables comportementales 
ont été identifiées dans le choix des internautes : les fonctionnalités offertes par le 
produit, la réputation de la marque et le prix de l'article. Les différentes personnes 
interviewées sont donc positionnées sur trois axes selon l'importance de leurs critères 
de choix respectifs. 


Le tableau ainsi construit fait apparaître des groupes d'utilisateurs présentant des 
comportements similaires. Un ensemble de personnes présentant des ressemblances 
sur six à huit variables différentes constitue la base d’un persona. 


Décrire les personas comme des êtres humains. 


[l reste ensuite à synthétiser les personas identifiés par une fiche sur laquelle sont 
décrites les principales variables comportementales qui les caractérisent. Les objectifs 
des personas au regard de l'application, tels qu’ils ont été recueillis lors de l'entretien, 
sont également précisés sur cette fiche. À ce stade, A. Cooper insiste sur l'importance 
de donner un nom aux personas, afin de Les humaniser et ainsi d’attirer l'empachie de 
l'équipe projet. 


Pour illustrer et concrétiser le persona, une histoire d'une ou deux pages est rédigée 
afin de décrire, en langage simple, la façon dont Le persona se sert du produit. Cette 
description s'appuie sur des éléments concrets issus des interviews. Pour construire un 
persona réaliste, il est essentiel de s'appuyer sur des faits réels et de ne rien inventer. 


À partir des caractéristiques comportementales de chaque persona, des objectifs 
d'utilisation sont identifiés. Ces objectifs sont un élément déterminant du caractère 
du persona et donc de son attitude vis-à-vis de l'interface. En effet, l'interface sera 
facile à utiliser dès lors qu’elle répond aux objectifs de l'utilisateur. 


À titre d'exemple, pour un site de commerce en ligne, l'objectif principal du 
persona peut être de trouver le produit qui propose le plus de fonctionnalité, tandis 
qu'un autre recherchera le produit le moins cher. 


Les différents personas identifiés sont ensuite priorisés afin d'identifier le persona 
primaire qui va être celui pour lequel l'interface est conçue, les autres personas sont 
qualifiés de secondaires. 


Le persona primaire doit être complètement satisfait par l'interface proposée sans 
pour autant que cela soit en contradiction avec les attentes des autres personas. Au 
contraire, les personas secondaires se satisferont de l'interface bien qu'elle ne réponde 
pas exactement à leur attente. 


Par exemple, pour un système de navigation GPS, deux personas ont été identifiés : 


+ Le conducteur féru de technologie qui l’utilisera également pour écouter des 
MP3. 


e Le livreur professionnel, internaute occasionnel, qui s'en sert pour son cravail. 


Le persona primaire est ici le livreur, car si l'interface est adaptée à son profil, elle 
sera également utilisable par le conducteur rechnophile, tandis que l'inverse n’est pas 
vral. 
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Il ne peut y avoir qu’un seul persona primaire par produit. Si ce n’est pas Le cas, il 
faudra prévoir différentes interfaces adaptées à chaque persona. Le persona primaire 
va donc être la cible principale du processus de conception. 


Le persona sert d'utilisateur de référence tout au long du projet. 


Une fois construits, les personas servent de référence à l’équipe projet tout au long 
de la conception de l'interface. Appliquer la méthode des personas permet de changer 
la vision de l’équipe projet. Le but du projet n’est plus de définir une interface qui 
permette d'accéder à un ensemble de fonctionnalités techniques, mais au contraire, 
de permettre à une personne (le persona) de se servir de ces fonctionnalités dans le 
cadre de sa vie de tous les jours. À chaque étape de la conception, les membres de 
l'équipe pourront se référer aux personas pour vérifier leurs hypothèses. Les personas 
permettent à l’équipe d'évaluer l'interface réalisée en se mettant à leur place, en 
adoptant leur profil comportemental, et en analysant la façon dont ils percevraient et 
utiliseraient l'interface. 


7.3.2 Tri par carte 


Le tri par carte est une méthode conçue pour construire l'architecture de l’information 
d’une application informatique : arborescence des rubriques d’un site web, structure 
des menus ou organisation des fonctionnalités d’un logiciel. 


Le tri par carte est mis en œuvre au début de la phase de conception car il permet 
de construire la structure de base sur laquelle s'appuie l'interface à la fois en termes 
d'organisation et de terminologie. 


À l'identique des autres méthodes présentées dans ce chapitre, les utilisateurs 
qui participent aux séances de tri par carte doivent constituer un panel représentatif 
du cœur de cible selon des critères propres à l'application, généralement de nature 
démographique : Âge, catégorie socioprofessionnelle, expérience du domaine, etc. 


Tri individuel ou collectif 


Le tri par carte peut être conduit individuellement, le participant est seul avec 
l'animateur, ou en groupe, plusieurs utilisateurs participent à la séance sous la conduite 
d’un ergonome. Des tris individuels fournissent des résultats plus riches et plus précis 
qu'un tri collectif qui peut être biaisé par l'effet de groupe. Cependant, en veillant à 
ce que tous les participants s'expriment naturellement, les résultats d'un tri en groupe 
sont quasiment similaires à ceux obtenus par une série de cris individuels. L'intérêt 
de mener le tri en groupe est d'aboutir à des résultats plus rapidement car Les sessions 
sont moins nombreuses. 


En individuel, huit à dix sessions de tri sont habituellement réalisées lorsque 
le panel utilisateur présente des profils relativement homogènes. En choisissant la 
méthode du tri collectif avec le même panel, deux à trois sessions suffiront. Notons 
que pour une séance de tri collectif, il est préférable que le groupe ne dépasse pas cinq 
participants car au-delà il est difficile à tous de participer. 
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Préparation du tri par carte 


Comme son nom l'indique, le tri par carte requiert un ensemble de cartes représentant 
les informations à organiser. Chaque carte, de la taille d’une grande carte de visite 
environ, symbolise une information présente dans le site ou un module fonctionnel 
du logiciel. 


Le titre de la carte est composé d'un ou deux mots-clés désignant l'information. 
En se limitant à un ou deux mots-clés, le titre sera plus rapide à lire et plus simple à 
comprendre. Par ailleurs, sa taille étant limitée, il pourra être plus facilement utilisé 
dans les menus de navigation du site ou du logiciel. 


Sous le titre, une ou deux phrases décrivent plus en détail l'information en question. 
Ce texte descriptif doit être rédigé avec soin afin de ne pas induire de regroupement 
lorsqu'il est lu par les participants. Eventuellement, dans certains cas, il peut être 
intéressant d'accompagner le texte d’une image, par exemple celle du produit concerné 
lorsqu'il s'agit d’un site de commerce. 


Protocole 


Un tri par carte est réalisé en crois étapes : validation des libellés, groupement et 
dénomination des groupes. 


Après avoir présenté les objectifs de la séance, l'animateur distribue aléatoirement 
les cartes sur la table. Il est parfois pratique de disposer les cartes en pile, en particulier 
lorsque le nombre de cartes est important. 


Dans un premier temps, il est demandé aux participants de relire chacune des 
cartes et de vériñer que le titre qui leur a été attribué leur paraît cohérent avec le 
contenu tel qu'il est présenté dans le texte descriptif situé en dessous. Si ce n'est pas 
le cas, les participants peuvent modifier Le titre de la carte en employant un libellé qui 
leur semble mieux adapté. 


Seconde étape, l'animateur demande aux participants de regrouper les cartes « qui 
se ressemblent ». Il leur demande de « construire des familles ». Des cartes vierges sont 
laissées à disposition afin qu'éventuellement certains contenus puissent être dupliqués 
dans plusieurs groupes. Dans ce cas, au moment de la conception de l'interface, une 
navigation transversale sera proposée entre les rubriques. 


Finalement, les participants donnent un nom à chacun des groupes qu'ils viennent 
de construire. Eventuellement, ils peuvent également décider de regrouper certains 
groupes pour former un « groupe de groupes » auquel ils donnent également un nom. 


Au cours de la séance, l'animateur reste Le plus neutre possible et incite les sujets à 
verbaliser : « Pourquoi avez-vous mis ces cartes ici ? En quoi se ressemblent-elles ? ». Les 
réponses des utilisateurs vont lui permettre de mieux comprendre le modèle mental 
qu’ils se construisent de l’application. 


L'analyse des résultats du tri par carte consiste à identifier les regroupements les plus 
fréquents effectués par les utilisateurs. Pour cela, des logiciels permettent de réaliser 
un traitement statistique à partir des différentes arborescences issues des séances de tri. 
Cependant le tri par carte est une méthode qualitative réalisée sur un petit nombre 
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d'utilisateurs. Le résultat du tri ne peut donc pas s’appuyer uniquement sur une analyse 
statistique. Les logiciels d'analyse doivent aider à l’organisation des informations, mais 
l'architecture résultant du tri doit également s’appuver sur les observations réalisées 
lors des séances de tri. C'est pourquoi il est important d'assister directement aux 
séances de tri. 


La méthode que nous venons de présenter précédemment est appelée « tri ouvert » 
ou « tri montant » car il part du contenu pour constituer des groupes. Le tri peut être 
conduit de manière inverse, en proposant une arborescence prédéfinie, au sein de 
laquelle Les participants doivent placer Les cartes présentées. Cette seconde méthode 
de cri est appelée « tri fermé ». Elle est généralement employée pour valider une 
arborescence issue d’un « tri ouvert ». 


Il est intéressant de combiner les techniques de tri ouvert et de tri fermé pour trier 
progressivement un grand nombre de cartes. En effec, il est difficile de conduire une 
séance de tri avec plus de 100 cartes. Dans ce cas, il est préférable de procéder par 
étapes en construisant a priori des groupes de premier niveau qui seront validés par un 
tri fermé, puis en conduisant des tris ouverts pour chacun des groupes, de manière à 
limiter Le nombre de cartes à traiter à chaque fois. 


Le tri par carte est une garantie de « trouvabilité ». 


Le cri par carte est la méthode la plus efficace pour construire une organisation du 
contenu de l'application dans laquelle l'utilisateur retrouve facilement les informations 
qu'il cherche. Certains auteurs qualifient cette caractéristique de « trouvabilité » 
(traduction littérale de l'anglais : findability). Les tests que nous avons conduits sur des 
sites construits à partir d'un tri par carte confirment cette qualité de la méthode. Les 
sites ainsi réalisés sont particulièrement bien compris des utilisateurs et très peu de 
problèmes de navigation sont observés. 


L'intérêt du tri par carte n’est pas seulement d'identifier la manière dont les utilisa- 
teurs vont organiser le contenu informatif de l'application. S'appuyant uniquement sur 
une représentation textuelle de l’incerface, il permet aussi de se focaliser directement 
sur la représentation mentale que les utilisateurs se font de l'application. 


De ce fait, le cri par carte est un excellent moyen pour définir le langage de 
l'interface. Il garantit que l'interface « parle » le langage de l'utilisateur et permet ainsi 
de faciliter notablement l’utilisation de l'application. 


Exemple : la l' version du site du conseil général du Territoire de Belfort 
(figure 7.4) reflétait La structure interne de l'institution, chaque compétence disposant 
d'une rubrique. Malheureusement, l'usager y trouvait difficilement les informations 
susceptibles de l'aider au quotidien. Le site a été réorganisé dans sa 2°d version 
(figure 7.5) par la méthode du cri par carte (prestation commune Axance-Usabilis). 
Les différents services que peut rendre le conseil général aux familles du Territoire de 
Belfort (le cœur de cible) y sont mis en évidence. 
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Figure 7.4 — La 1" version du site du conseil général du Territoire de Belfort reflétait la structure 
interne de l'institution, chaque compétence disposant d'une rubrique. 
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Figure 7.5 — Le site a été réorganisé par la méthode du tri par carte. 
Les différents services sont mis en évidence. 
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7.3.3 Maquettage/prototypage 


Le maquettage/prototypage consiste à concevoir des versions intermédiaires de l’in- 
terface avant de finaliser les spécifications qui serviront de base au développement du 
produit final. Chaque version intermédiaire est évaluée du point de vue ergonomique 
en s'appuyant sut les différentes méthodes présentées dans ce chapitre. 


Le maquettage/prototypage s'inscrit dans une démarche conception itérative de 
l'interface. Il vise à améliorer progressivement l'interface en s'appuyant sur l'analyse 
du comportement des utilisateurs finaux lorsqu'ils se servent de l’application. 


Dans le domaine des interfaces, les termes de maquette et de prototype sont 
indifféremment employés pour désigner des versions préliminaires de l’interface. La 
distinction entre les deux est liée à leur degré de pérennité. La maquette est une 
version « jetable » de l'interface, tandis que le prototype a été développé sur La même 
base logicielle que le produit final. Le prototype est La première version du logiciel 
candis que la maquette est généralement statique et n’a pas été conçue avec des outils 
de développement. 


Conduire le protorypage sans impacter sur les délais de développement. 


Les équipes de développement sont généralement peu disposées à mettre en œuvre 
une phase de prototypage pour concevoir l'interface, car elles craignent de devoir en 
attendre la fin pour démarrer effectivement le développement, rallongeant d'autant le 
planning du projet. 


Cette crainte est amplifiée par le fait que la conception de l'interface est générale- 
ment abordée tardivement. Des itérations trop longues lors du prototypage risquent 
d'impacter la date de livraison de l'application c'est-à-dire la date finale du projet. 


Il est essentiel de pouvoir intégrer la phase de prototypage le plus tôt possible dans 
le planning du projet sans qu’elle constitue un point de blocage par rapport aux autres 
tâches. Le prototypage doit être conduit en parallèle du reste du projet et ne pas être 
considéré comme une tâche à part. 


Pour ce faire, il est possible de jouer sur la fidélité de la maquette, c'est-à-dire sa 
ressemblance par rapport à l’interface finale en termes d’interactivité et de graphisme. 
Les premières maquettes, conçues au début du projet, sont statiques (aucun degré 
d’interactivité) et épurées. Puis, progressivement, au fur et à mesure des itérations, 
la maquerte se rapproche de l'interface finale à la fois en termes d'interaction et de 
graphisme. 


Au début du projet, le premier prototype de l'interface est une maquette « fil de 
fer » (wireframe)} présentant les principaux éléments textuels de l'interface : libellés 
des boutons, contenu des fenêtres, libellés des rubriques de la barre de navigation pour 
un site web. L'agencement de l'écran est défini, mais le graphisme n'a pas été travaillé. 
La maquette est généralement en noir et blanc. 
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Figure 7.6 — Une maquette « fil de fer » présente, de manière épurée, l'ensemble du contenu 
de l'interface. Elle peut servir de support à un test utilisateur afin de valider la compréhension 
et la visibilité de différentes zones de l'écran. lci la maquette du logiciel Précovision réalisée pour 
Agrosud. 


Cette première maquette n'autorise aucune interaction. C'est une maquette 
statique, parfois réalisée directement sur papier. Ce type de maquette présente 
l'intérêt de pouvoir être construite rapidement et de servir de support à une première 
phase d'évaluation avec les utilisateurs. Une maquette statique permet de vérifier La 
compréhension des libellés utilisés, l'agencement des écrans et la lisibilité de chaque 
zone de l'interface. 


Lors de l’itération suivante, la maquette pourra présenter un graphisme plus proche 
du produit final ou bien des capacités d'interaction plus riches. Au fur et à mesure 
du développement, de nouvelles fonctionnalités sont intégrées dans un prototype 
qui sert de base à des tests utilisateurs. Jouanc sur les deux dimensions : graphisme 
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et interaction, la fidélité de la maquette augmente à chaque itération permettant de 
réaliser des tests de plus en plus réalistes. 


Degrés de prototypage 


On distingue deux degrés de prototypage selon le niveau d'interactivité offert par le 
prototype [Nielsen 93] : 


e Le prototype horizontal correspond uniquement à la partie graphique de 
l'interface, c’est une maquette statique. 

+ Le prototype vertical met en œuvre certaines des fonctionnalités de l'application 
afin que l'utilisateur puisse réaliser complètement une tâche significative de 
l'application. 
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Le prototype horizontal présente la « surface » de l'interface. Les fonctionnalités de 
l’application ne sont pas implémentées, seuls les éléments de l'interface sont présentés : 
boutons, menus, champs de saisie, etc. 


IHM Prototype horizontal 


Système 


Figure 7.7 — Les prototypes sont construits au fur et à mesure du développement. Tout d'abord, 
un prototype horizontal, en fait la partie visible de l'application, permet de vérifier que l'interface 
est facile à comprendre (test de perception). Ensuite, un prototype vertical, sur lequel certaines 
fonctionnalités ont été implémentées, est testé en situation d'utilisation (test utilisateur). 


Les versions suivantes du prototype sont du type « vertical ». Un prototype vertical 
correspond à la mise en œuvre d'un ensemble cohérent de fonctionnalités, certaines 
d’entre elles pouvant être simulées par programme afin que l'utilisateur puisse dérouler 
un scénario d'utilisation typique du logiciel. 


Les prototypes verticaux sont conçus en parallèle du développement et intègrent 
progressivement les nouvelles fonctionnalités de l'application. Ils servent de support à 
des tests utilisateurs qui permettent d'améliorer graduellement l'interface. 


Sur la base des résultats du test, des solutions sont élaborées et mises en œuvre 
dans la version suivante du prototype qui va faire l’objet d'une nouvelle série de tests, 
et ainsi de suite. En règle générale, les problèmes d'utilisabilité diminuant à chaque 
itération, trois phases de prototypage permettent de lever la plupart des problèmes. 


Zoning et pistes graphiques 


Pour un site web, une première forme de maquette statique consiste à définir le 
« zoning » des écrans, c'est-à-dire le découpage des pages du site. Pour chaque type 
de page (page d'accueil, page intérieure, chapeau de rubrique, etc.) le concepteur 
identifie les différentes zones de la page. Il précise le rôle et le contenu de chaque zone, 
positionne les zones sur page et définit leur taille relative ainsi que leur importance 
visuelle. 


Le zoning sert de base au travail du graphiste. Ce dernier habille les différentes zones 
de l’écran ainsi définies en fonction de l'identité visuelle du produit. Des maquettes 
peuvent être ensuite directement réalisées à partir des images créées par le graphiste. 
Des liens sont placés sur certaines parties de l’image afin de permettre de naviguer 
entre les écrans et donc de vérifier l'ergonomie du système de navigation proposé. 
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Figure 7.8 — Une maquette réalisée à partir des pistes graphiques permet de valider la 
navigation dans l'interface et la compréhension des intitulés des principales rubriques (design final 
du logiciel Précovision réalisé pour Agrosud). 


Story-board 


Les story-boards constituent une forme de maquettage intermédiaire entre le proto- 
type statique et le prototype dynamique, ou fonctionnel. Un story-board est une série 
d'écrans statiques représentant exactement les différents états de l'interface dans le 
cadre d’une utilisation donnée. 


Différents story-boards sont généralement conçus pour modéliser l'interface sur la 
base des scénarios d'utilisation typique de l'application. 


Maquettage papier 


Le maquettage papier est probablement la technique la moins coûteuse et la plus 
rapide pour réaliser un prototype. Cependant, elle est peu utilisée car l'interface est 
jugée trop éloignée du produit final. Toutefois, des tests sur des maquettes papier 
peuvent permettre d’idencifier un bon nombre des problèmes d’utilisabilicé de la future 
application et de valider efficacement le langage de l'interface. 


Qui plus est, les utilisateurs seront plus enclins à critiquer une maquette papier, 
qui leur semble avoir demandé moins de travail, qu'un prototype réaliste, proche du 
produit final. De même, comme l'indique Thierry Baccino, les équipes de dévelop- 
pement seront moins portées à modifier un prototype finalisé dans lequel elles ont 
investi un effort de travail notable [Baccino 05]. Au contraire, elles n'hésiteront pas à 
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modifier un prototype papier qui n’a rien coûté. C’est pourquoi, le prototypage papier 
est considéré par de nombreux auteurs comme l’une des méthodes de maquettage les 
plus rentables. 


Toutefois, le maquettage papier a ses limites, en particulier le fait que la maquette 
ne soit pas à l’échelle de l'interface finale, qu’elle ne tienne pas compte de la taille 
réelle de l'écran, peut poser des problèmes au moment du développement. Pour fournir 
une base solide aux équipes de développement, qui puisse servir de spécification 
de l'interface finale, il faudra construire une maquette réaliste à l'échelle exacte du 
produit final. 


De plus, lors des tests, le réalisme de la maquette est essentiel car il permet à 
l'utilisateur de mieux s'approprier l'application. C'est pourquoi, dans la mesure du 
possible, il est préférable d'éviter du faux texte (lorem ipsum, etc.} au profit du véritable 
contenu de l'interface. 


La maquette sert de référence à tous les acteurs du projet. 


Le maquettage/prototypage est la méthode de base pour la conception des inter- 
faces. La maquette présente l'intérêt de matérialiser l'interface et par là même le 
logiciel ou le site web. Elle va servir de référence aux différents acteurs du projet qui, 
par ce biais, vont s’accorder sur un langage commun. 


La maquette peut également servir à la promotion commerciale du produit et être 
utilisée à des fins de démonstration par les équipes commerciales avant le lancement 
ofhciel du produit. 


7.4 ÉVALUATION ERGONOMIQUE 


Les méthodes d'évaluation vont permettre de mesurer l'ergonomie de l'application afin 
d'identifier les points à améliorer en particulier entre deux itérations de la maquette. 
Nous présentons ici les trois méthodes les plus fréquemment employées : l'audit 
ergonomique qui consiste à analyser l'interface au regard d’un ensemble de critères 
ergonomiques reconnus, le test de perception et le test utilisateur où l'utilisateur est 
placé en situation réaliste d'utilisation afin d'identifier les difficultés qu’il rencontre. 


7.4.1 Audit ergonomique 


L'audit ergonomique consiste à évaluer les points forts et les points faibles d'une 
interface au regard des règles d’ergonomie. [l permet de mettre en exergue rapidement 
les difficultés que rencontrera l’utilisateur du produit, ainsi que les facilités offertes par 
l'application en termes d’ergonomie. 


L'audit peut être réalisé à différentes phases du projet. Lorsqu'il s’agit de la refonte 
d'une application existante, l'audit est généralement la première étape, voire l'élément 
déclencheur, du projet. Pour la création d’une nouvelle application, l'audit permet 
d'évaluer Les premières maquettes réalisées. 
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L'audit peut porter sur le produit fini ou sur une maquette de l’interface. Il est 
parfois intéressant d'introduire une phase d'audit ergonomique à chaque étape clé du 
projet, par exemple pour un site web, à la livraison des pistes graphiques puis pour 
celles des story-boards et finalement à la livraison de la maquette du site. Sur des 
projets d'envergure, l'audit est parfois intégré à la phase de recette des modules de 
l'application. [Il permet de valider que l'ergonomie de chaque partie de l’application 
est cohérente avec celle de l'ensemble du système. 


Contrairement aux autres méthodes présentées ici, l'audit ergonomique ne fait 
pas appel aux utilisateurs finaux. Il est réalisé directement par un ou plusieurs experts 
en ergonomie qui s'appuient sur leur expérience et sur les principes d’ergonomie des 
interfaces pour évaluer l’utilisabilité de l'application. 


Le temps de préparation étant moins important, cette méthode permet d'obtenir 
rapidement des résultats. Par contre, elle se prive des retours concrets issus de 
l'expérience réelle des utilisateurs finaux. En effet, certains problèmes, liés au contexte 
d'utilisation de l'application ou à la tâche réalisée par les utilisateurs, sont plus difficiles 
à repérer par une analyse « de l'extérieur ». 


Pour pallier les limites du mode opératoire et la subjectivité de l’évaluateur, il est 
préconisé que plusieurs experts conduisent l’audit (trois à cinq selon [Baccino 05]), 
puis confrontent leurs analyses. Toutefois, ce type d'évaluation croisée est générale- 
ment difficilement compatible avec le budget alloué à la phase d’audic. C'est pourquoi 
l'audit est plus fréquemment conduit par une seule personne et revu ensuite par un 
autre expert du domaine. Éventuellement, il peut être intéressant pour des applications 
professionnelles en particulier que l’audit soit revu par un expert du domaine applicatif 
qui apportera un éclairage métier sur les points identifiés lors de l'audit. 


L'audit ergonomique consiste à passer en revue chacun des éléments de l'interface 
afin de vérifier qu’ils respectent un ensemble de règles et de principes d'ergonomie. Il 
existe des grilles génériques d'évaluation ergonomique, telle que la grille construite 


sur la base de La norme ISO 9241 [Gediga 99]. 


Principes 
ergonomiques Produit 
Grille de critères Éléments d'interface 


Analyse 


HE 


Figure 7.9 — Lors d'une évaluation par inspection, chaque élément de l'interface 
est analysé au regard d'une grille de critères ergonomiques. 


Toutefois, la plupart du temps, l'évaluateur construit sa propre grille en prenant en 
compte à la fois les critères ergonomiques, les spécificités de l'application et le profil de 
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l'utilisateur. Le dénominateur commun à toutes les grilles d'inspection est l’ensemble 
des critères ergonomiques présenté en annexe [Scapin et Bastien 97]. 


Grille d'inspection simplifiée 

Le dialogue est-il simple ? 

Le langage utilisé est-il celui de l'utilisateur ? 

Le travail de mémorisation est-l minimal ? 

La présentation et le dialogue sont-ils cohérents ? 
Les retours sont-ils visibles ? 


Les sorties sont-elles explicites ? 

Existe-t-il des raccourcis ? 

Les messages d'erreur sont-ils explicites ? 
Les erreurs sont-elles évitées ? 

Existe-t-il une aide ? 

Le logiciel est-il documenté ? 


Une grille simplifiée, du type de celle présentée dans l'encart peut également être 
employée [Nielsen 93].Elle permet d’identifier les principaux problèmes d’utilisabilité. 


Protocole 


La méthode consiste à examiner l'interface en suivant les parcours prévisibles de 
l'utilisateur sur l'application. Après avoir recueilli des informations sur le profil et 
les objectifs des utilisateurs de l'application. L'évaluateur veille à réaliser le plus 
précisément possible les tâches demandées à l’utilisateur en intégrant au mieux les 
différentes contraintes liées à cette tâche. 


Pour chaque problème identifié, l’évaluateur s'appuie sur Les règles ergonomiques 
pour en déduire les conséquences du point de vue de l'utilisateur. Les résultats de 
l'audit sont ensuite priorisés au regard de leur impact pour l'utilisateur final. 


Un problème est qualifié de bloquant lorsqu'il empêche l'utilisateur de réaliser la 
tâche ou qu'il le contraint à abandonner. Il est génant lorsqu'il est source d’une perte 
de temps et simplement ennwyant, ou mineur, s'il s’agit d'un élément de confort qui 
n'a pas d'incidence sur la tâche proprement dite. D'autres facteurs doivent également 
être pris en compte dans la priorité que l’on accorde aux différents problèmes, en 
particulier la fréquence du défaut : une difficulté qui n'apparaît qu’une seule fois est 
moins gênante que si elle apparaît sur toutes les fenêtres de l'application. 


L'objectif de l'audit est d'identifier les problèmes et d'analyser leur nature. À ce 
stade, il ne s'agit pas de proposer des solutions. Éventuellement, des recommandations 
générales pourront être fournies, mais elles devront être confrontées à l'appréciation 
des utilisateurs et aux choix techniques du projet. Généralement, la recherche de 
solutions est initiée lors de la présentation des résultats de l'audit. 


L'audit : première étape d'une démarche ergonomique. 
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L'audit ergonomique est fréquemment le point de démarrage d’une démarche de 
conception orientée utilisateur. Il permet d'identifier les problèmes d'utilisabilité 
et leur associer des niveaux de gravité. L'audit fournit des éléments tangibles pour 
prioriser les différentes phases de conception de l'interface. Il permet de « dégrossir » 
le travail de conception en identifiant les points clés de l’application en termes 
d'ergonomie. Il ne remplace pas un test utilisateur, mais lui permet d'être plus efficace, 
car mieux préparé. 


7.4.2 Test de perception 


Le test de perception vise à évaluer la compréhension du site. Rapide, réalisable sur 
un simple prototype papier, il peut être mis en œuvre dès les premières phases du 
projet et permet d'identifier rapidement les problèmes. 


Le prototype utilisé ne nécessite pas un effort de développement important. Il peut 
être statique. Une simple image de la page d'accueil ou une maquette PowerPoint 
suffisent. 


Le test consiste à présenter le protocype à l'utilisateur et à analyser la façon dont 
il le comprend. IL est préférable de s'appuyer sur une présentation à l'écran afin de 
prendre en compte le rendu des couleurs, mais on peut aussi travailler sur du papier. 
Sans que l'utilisateur agisse sur la maquette, l'observateur lui demande d'expliquer 
comment il interprète la page. Il identifie ainsi les informations les plus apparentes aux 
yeux de l'utilisateur. Il vérifie que les zones de navigation sont facilement repérables 
et que le texte des liens est correctement compris. 


Lors de ce premier test, il est également possible d'évaluer la façon dont l'utilisateur 
interprète les services proposés par le site en lui demandant d'imaginer, en s’aidant du 
prototype, la façon dont il réaliserait une tâche typique du site. 


Questions à poser lors du test de perception 


Que permet de faire cette page ? 

Que voit l'utilisateur en premier ? 

Où se trouvent les liens et les boutons ? 

Que signifient-ils ? 

À quoi servent ces boutons ? 

Que va-t-il se passer quand on clique dessus ? 

Pour une demande type, où doit aller l'utilisateur ? Que pense-t-il trouver ensuite ? 


Le test de perception permet principalement de vérifier que l'internaute comprend 
la façon d'utiliser le site et qu'il interprète correctement le vocabulaire utilisé. Il peut 
être aussi l’occasion de valider la charte graphique auprès des utilisateurs en évaluant 
la façon dont ils perçoivent le graphisme proposé. 
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Check-list d'évaluation graphique 


Que ressent l'utilisateur ? 
Que pense-t-il du graphisme ? 


Quel thème associe-t-il au graphisme ? 

Que regarde-t-il en premier ? 

Qu'aime-tl ét que n'aime-t-il pas ? 

Quelle impression garde-tl d'une entreprise qui affiche cette image ? 


7.4.3 Test utilisateur 


Le test utilisateur, appelé aussi « test d’utilisabilité », est la méthode la plus efficace 
pour évaluer l'ergonomie d’une application. Il permet d'observer directement la 
façon dont l'utilisateur se sert d’une application et ainsi identifier concrètement les 
véritables difficultés qu'il rencontre. Il fournit un moyen opérationnel pour répondre 
concrètement aux questions qui se posent lors de la conception de l'interface. 


Le test utilisateur est parfois réalisé au démarrage du projet en particulier dans 
le cadre de la refonte d’une application. Toutefois, il est plus efficace de conduire 
le test sur une maquette intermédiaire afin d'obtenir des retours sur les choix de 
conception qui ont été effectués. Des tests sur des maquettes « papier » non finalisées 
(voir précédemment) permettent de valider rapidement certaines parties de l’interface. 
Il n’est pas nécessaire de disposer de la version finale de l’application pour conduire 
un test utilisateur. 


La nature des tests et des scénarios d'évaluation dépend du niveau d'interactivité 
de la maquette. Sur une maquette statique, le test, dit « de perception », portera 
sur la compréhension et la visibilité des zones de l'écran. Ensuite, une maquette 
semi-fonctionnelle permet de conduire plusieurs scénarios prédéfinis et donc de valider 
la navigation dans l'interface. Finalement, une maquette fonctionnelle, présentant 
une partie significative des fonctionnalités de l'application, offre une plus grande 
liberté de navigation à l'utilisateur et permet une exploration libre du logiciel où du 
site. 


Protocole 


La qualité d’un test utilisateur dépend en grande partie de la rigueur avec laquelle le 
protocole de test est élaboré. En apparence, un test utilisateur peut sembler simple 
à construire : «il suffit de demander aux utilisateurs de se servir du produit comme 
ils le feraient s'ils étaient seuls et de leur demander ce qu’ils en pensent »… Toutefois, 
en procédant de cette manière, il y a de fortes chances que l’on obtienne des 
résultats hétérogènes sur lesquels il ne sera pas possible de s'appuyer pour identifier 
concrètement la manière d'améliorer l'interface. 


C'est pourquoi, il est essentiel de construire un protocole de test précis afin de 
pouvoir généraliser les résultats à l’ensemble de la population visée. 
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Un protocole de cest rigoureux nécessite : 


° Une définition claire des objectifs du test et des hypothèses qui en découlent. 


e L'identification des mesures permettant de vérifier ces hypothèses. Ces mesures 
seront réalisées dans le cadre d'un scénario qui place l’utilisateur en situation 
écologique. 

e La participation d'un panel d'utilisateurs suffisamment représentatif de la 
population visée à la fois en nombre et en profil. 


La méthode du test est directement dérivée des méthodes d’expérimentation 
scientifiques. Elle vise à mettre en œuvre un protocole permettant de prendre des 
mesures objectives qui vont servir à valider une ou plusieurs hypothèses énoncées 
initialement. 


La norme [ISO 9241-11] définit l’utilisabilité de la manière suivante. 


Un système est utilisable lorsqu'il permet à l'utilisateur de réaliser sa tâche avec efficacité, 
efficience et satisfaction dans le contexte d'utilisation spécifié. 


En d’autres termes, on considère qu’une application est utilisable lorsque l'utili- 
sateur peut réaliser sa tâche (efficacité), qu’il consomme un minimum de ressources 
pour le faire (efficience) et que le système est agréable à utiliser (satisfaction). Tester 
l'utilisabilité consiste donc à valider ces trois critères : 


* Les objectifs visés par l'utilisateur sont atteints (efficacité). 


+ Les ressources nécessaires pour atteindre ces objectifs (efficience} sont mini- 
males (pour cela on mesure généralement le temps mis pour réaliser la tâche). 


e Le système est agréable à utiliser (satisfaction). 


Objectifs et hypothèses 


Dans un premier temps, les objectifs du test sont définis avec l’équipe projet en 
fonction de la nature de l'interface, du type de tâche demandée et des questions 
soulevées par l'équipe en charge de la conception. 


Pour chaque objectif, l’évaluateur identifie une ou plusieurs hypothèses associées. 
Généralement, l'hypothèse consiste à supposer que l'interface qui va être testée répond 
correctement à l'objectif. 


Ensuite, il identifie et prépare les mesures qui vont permettre de vérifier cette hypo- 
thèse. Les mesures sont des questions ou des actions réalisées par l'utilisateur. Selon 
la réponse à ces questions ou selon la réussite de l’action identifiée, l'hypothèse est 
validée ou non. Sur une application, les mesures généralement réalisées concernent : 
la réussite de la tâche, le temps de réalisation de la tâche, le nombre d'erreur, le 
nombre de clics, etc. 
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Objectifs du test *———+ Équipe projet 


Scénario «++ Réalisation de la maquette 


| 


Panel utilisateur ++ Récrutement des utilisateurs 
Script 
Test à Utilisateurs 


Résultats >» Équipe projet 


Figure 7.10 — Les étapes du test utilisateur. 


Exemple : Test d'un logiciel pour centre d'appel 
Objectif : 
Évaluer l'utilisabilité de la fenêtre principale de l'application. 


Hypothèse : 
La fenêtre principale permet de réaliser les taches les plus fréquentes du télé- 
conseiller. 

Mesures : 


Réussite des tâches de changement d'adresse et de vérification du fonction- 
nement de l'appareil du client (ces deux tâches ont été identifiées comme 
les plus fréquentes). 


Temps de réalisation des deux têches. 
Satisfaction des utilisateurs (note sur une échelle de 1 à 5). 


Figure 7.11 — Définition des objectifs, hypothèses et mesures correspondantes. 
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Scénario 


Le test consiste à placer l’utilisateur dans une situation dire « écologique », la plus 
proche possible de l’utilisation réelle de l'application. Les fonctionnalités ne sont donc 
pas testées individuellement comme c'est le cas lors de la recette fonctionnelle d'un 
logiciel, l'utilisateur doit se servir de l'interface dans Le cadre d’une tâche réelle. Il s'agit 
donc de construire un scénario d'utilisation qui permette de vériñer les hypothèses 
identifiées précédemment. Ce scénario correspond généralement à une tâche typique 
de l’utilisateur. Il intégrera également des éléments spécifiques afin de vérifier certains 
points clés de l'interface. 


Le scénario de test précise les fonctionnalités attendues sur le prototype, en 
particulier les éléments qui devront être simulés dans la maquette afin d'en augmenter 
le réalisme ou bien de placer l'utilisateur dans certaines conditions d'utilisation 
particulière. 


Exemple : Test d'un logiciel pour centre d'appel 
Scénano « fraitement d'un appel » : 


Un chent appelle pour indiquer un changement d'adresse et des problèmes 
techniques. 


Le téléconseiller doit afficher la fiche client, effectuer le changement d'adresse, 
vérifier les références du maténel et effectuer des tests de connexion. 


fonctionnalités attendues du prototype : 


Fenêtre ‘Fiche client‘ affichant un profil client cohérent avec référence du maténel 
ainsi qu'une liste d'appels dans les mois précédents. 


Fenêtre de changement d'aciresse. 
Simulation des tests de connexion, 


Figure 7.12 — Scénario de test. 


Panel utilisateur 


En fonction des objectifs du test et des scénarios, une population d'utilisateur cible est 
identifiée. Le panel utilisateur participant au test doit être globalement représentatif 
de la population cible. En général, il s’agit des utilisateurs finaux de l’application, 
mais il peut être intéressant d'intégrer également dans le panel des personnes qui ne 
connaissent pas l'application (ils apporteront le point de vue des novices), voire des 
utilisateurs d'un produit concurrent. 


]. Nielsen a montré que des tests menés avec cinq utilisateurs permettent de lever 
au moins 80 % des problèmes d'utilisabilité [Nielsen 00]. En effet, il s'agit d'une 
évaluation qualitative et les problèmes d’utilisabilité viennent du logiciel ec non des 
utilisateurs. 
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Figure 7.13 — Il suffit de cinq utilisateurs [par profill pour déceler la plupart des problèmes 


d'utilisabilité [Nielsen C01. 


Toutefois, certaines études récentes indiquent que cinq utilisateurs ne suffisent pas 
toujours pour obtenir une couverture significative de l'application, il est préférable 
de prévoir 10 à 20 utilisateurs par test [Baccino 05]. Pour notre part, nous conseillons 
de conduire les tests avec différents profils et cinq utilisateurs par profil. Dans ces 
conditions, des tests avec 12 à 16 utilisateurs permettent d'obtenir des résultats 
significatifs généralisables à l’ensemble de la population. 


Exemple : Test d'un logiciel pour centre d'appel 


L'enquête menée auprès des utilisateurs montre que ce sont en majorité des 
femmes, utilisant fréquemment Intemet, ayant moins d'un an d'expérience dans 
ce métier 


Panel utilisateur (8 participants) : 


6 femmes, 2? hommes -— se servent fréquemment du web — 6 ont moins d'un an 
d'expérience 


Figure 7.14 — Exemple : constitution du panel utilisateur. 


Script 


Afin de conduire le test dans les mêmes conditions avec tous les participants, un script 
va servir de guide à l'animateur. Le script lui serc aussi de support de notes. Il définit 
précisément la manière de conduire Le test pour chaque participant. Le script précise 
également les artifices employés par l’animateur pour placer l'utilisateur dans une 
situation réaliste, comme des documents factices associés aux scénarios par exemple. 
Le script indique les consignes et les tâches qui sont demandées au participant ainsi 
que les mesures à réaliser pour vérifier les hypothèses initiales. 
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Le script indique en particulier les questions posées aux participants (mesures 
subjectives) ainsi que les autres mesures effectuées : réussite de la tâche, nombre 
d'erreurs, temps de saisie, etc. Il doit permettre à l'observateur de noter les réponses et 
les données récoltées directement. 


Exemple : Test d'un logiciel pour centre d'appel 


Consigne : 
« Un client vous appelle : Bonjour, je m'appelle P. Duwand. J'ai déménagé et 
je voulais vous donner me nouvelle adresse. Ah oui, j'ai aussi des problèmes 
de déconnexion quand je me connecte à Telerama.com.…. » 
Observations : 
L'utilisateur réussit-il à trouver la fiche du client ? : Oui/Non 
Temps pour afficher la fiche client : 
Réussit-il à modifier l'adresse ? : Oui/Non 
Temps pour modifier l'adresse : 
Difficultés rencontrées par l'utilisateur : 


Figure 7.15 — Script de test. 


Éventuellement, certaines valeurs chiffrées pourront être saisies ultérieurement en 
visionnant le test si un enregistrement a été effectué. 


Pré-test 


Il est utile de conduire un test « pilote » ou pré-test qui va servir à vérifier La cohérence 
et la faisabilité du protocole de test, ainsi que le bon fonctionnement du matériel 
(ordinateur, prototype, logiciel d'enregistrement, etc.). 


Le pré-test permet d'évaluer le temps moyen mis par l'utilisateur pour réaliser le 
test. Généralement, Le pré-test est effectué avec une personne de l'équipe projet, qui 
connaît donc l'application. Dans ce cas, il est préférable de doubler le temps mis pour 
réaliser le test afin d'estimer celui que mettra effectivement un utilisateur découvrant 
l'application. 


Notons qu'il arrive aussi que le premier test avec un véritable utilisateur serve 
parfois de pré-test, et qu'il faille ajuster les consignes suite à cette première expérience. 


Conduire le test 


Le test est conduit dans un contexte le plus proche possible de l’utilisation réelle du 
logiciel. S'il s’agit d’une application professionnelle, le test est réalisé, dans la mesure 
du possible, sur Le lieu de travail des utilisateurs. Toutefois, pour une application grand 
public, les tests sont rarement réalisés au domicile des utilisateurs. Pour des raisons 
pratiques, il est plus simple de conduire le test dans un local dédié. 


Qui plus est, les salles de test disposent généralement d’une pièce attenante séparée 
par une glace sans tain permettant aux membres de l’équipe projet d'assister au test. 
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Dans ce cas, il convient de préciser aux participants qu'ils sont susceptibles d’être 
observés. Par contre, il est déconseillé de chercher à conduire le test depuis cette pièce. 
Il est préférable que l'observateur se tienne à côté du participant, légèrement en retrait, 
afin d'établir une relation de confiance qui favorisera les échanges et l'observation. 


Le test vise à évaluer le logiciel, pas l'utilisateur. 
BC 


Il arrive, lors du test, que l'utilisateur n'ose pas dire qu’il ne réussit pas à se servir 
du logiciel. Il préfère cacher ses difficultés, rendant caduques les résultats du test. C’est 
pourquoi il est important de mettre en confiance l’utilisateur au début de la séance en 
lui rappelant que s’il ne réussit pas à se servir de l'application, c'est qu'elle a été mal 
conçue. L'objectif du test est d'identifier les problèmes d'utilisabilité et non de mesurer 
la capacité de l'utilisateur à se servir de l'application. 


Laisser l'utilisateur se tromper. 


Le principal intérêt du test est d'observer l'utilisateur dans le contexte réel 
d'utilisation. Il est donc essentiel de ne pas l'aider, sauf bien entendu en cas d’impasse. 
En effet, afin d'identifier clairement les problèmes, il faut le laisser « se débrouiller » 
comme il le fera quand il sera seul face à l'application. Par contre, une fois la source 
de l'erreur identifiée, afin de mettre à nouveau en confiance l'utilisateur, il convient 
de le tranquilliser en lui indiquant que l'erreur vient de l'application et non de lui. 


L'observateur doit rester Le plus neutre possible afin de ne pas influencer les réponses 
et les actions de l’utilisateur. Il ne doit pas donner son point de vue, ni le laisser 
paraître. L'observateur doit au contraire s'appliquer à comprendre le point de vue de 
l'utilisateur. 


Demander à l'utilisateur de verbaliser. 


Pendant le test, afin de comprendre le comportement de l'utilisateur, l'animateur 
doit l’inciter à verbaliser. Il pose des questions qui vont conduire le participant à 
éliciter ses processus mentaux : 

e Que voulez-vous faire ? (objectifs) 

e Comment faites-vous cela ? (mode opératoire) 


Que fait le logiciel ? Qu'attendiez-vous que le logiciel fasse ? (réponse attendue) 


Pourquoi a-t-il fait cela ? Que veut dire ce message ? (compréhension) 


Pour chaque participant, l'animateur conduit le test en suivant le script. Il note 
les erreurs commises, les incompréhensions, les impasses, tout événement qui montre 
une difficulté dans l’utilisation du logiciel. 


Ces différentes observations peuvent faire l'objet, une fois le test terminé, d’une 
analyse « à chaud » avec l'utilisateur afin de mieux comprendre les causes des 
problèmes. Des solutions originales naissent parfois de ces échanges. 
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Durée du test 


Les tests durent 1 h 00 à 1h 30 environ, selon le type d'application. Au-delà, 
l'attention du participant, tout comme celle de l'animateur, diminue et les échanges 
sont de moindre qualité. 


Une même séance comporte généralement plusieurs scénarios. Chaque scénario 
dure entre 15 et 30 minutes. Le premier scénario correspond à une consigne simple 
qui permet à l'utilisateur d'appréhender le logiciel et de se mettre en confiance. Les 
consignes suivantes sont généralement plus complexes. 


Tester la compréhension 


Pour vérifier la compréhension d'une page d’un site web ou d’une application, il est 
intéressant de conduire au cours du test des tests locaux de perception. Lorsqu'il arrive 
sur la page ou la fenêtre en question, l’utilisateur ne doit plus utiliser la souris et 
l'observateur lui demande d'expliquer comment il interprète l’écran : ce que signifient 
les libellés, les boutons, les liens, ce qui va se passer quand il va cliquer, etc. 


Check-list de questions à poser lors du test de perception 


Que permet de faire cette fenêtre ? 
Où se trouvent les boutons/les menus ? 
Que signifient-ils ? À quoi servent-ils ? 


C4 
LA 
Que va-tAl se passer quand on clique sur ce bouton ? Quand on sélectionne ce menu ? 
+ Pour une tâche type, comment faire ? 


Ces questions permettent de vérifier si les libellés sont correctement compris et 
si Les zones importantes de l’écran sont suffisamment mises en évidence aux yeux de 
l'utilisateur. 


Tester la navigation 


L'observateur vérifie que l'internaute se repère correctement dans l’application, qu’il 
trouve l'information qu'il cherche et qu'il suit le chemin le plus court pour y aller. 
Le test sert à vérifier que les boutons sont correctement positionnés sur la page là 
où l'utilisateur les cherche. Lorsque certains boutons manquent, le test permet de les 
identifier. C’est le cas des « raccourcis » qui accélèrent la navigation entre certaines 
pages de l’application. 


L'observateur vérifie que les textes sont compris sans ambiguïté par l'internaute, 
en particulier le libellé des boutons ou des liens. Il peut aussi évaluer la facilité de 
mémorisation de l'application. Pour cela, il vérifie que l'internaute sait, de mémoire, 
où se trouve l'information et qu’il se souvient de la position et du nom des liens. 
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Points à vérifier lors du test d'utilisabilité 


L'utilisateur sait-il où il est ? 

Trouve-t-il l'information qu'il cherche ? 

Choisit-il le chemin le plus court pour trouver l'information ? 

L'utilisateur voit-il les informations importantes ? 

A-t-il repéré où sont les boutons/liens ? 

Les intitulés des boutons/liens lui permettent-ils de deviner correctement le contenu 
des pages ? 

Certains boutons/liens manquent-ils à l'utilisateur ? 

Des « raccourcis » permettraient-ils d'accélérer la navigation ? 

L'utilisateur connaît-il les boutons/liens vers les principales pages ? 

Comprend:t-il correctement le contenu des pages ? 

L'utilisateur réussit-il à mémoriser correctement l'organisation du site ou de l'applica- 


üion ? 


De cette manière, les problèmes d’utilisabilité rencontrés par les utilisateurs sont 
clairement mis en évidence. L'analyse des causes de chacun d’entre eux permet de 
construire des pistes concrètes d'amélioration de l'application. 


Résultats du test 


Les différentes séances de test sont ensuite analysées. L'analyse s’appuie généralement 
sur des enregistrements vidéo. Les différentes mesures prévues dans le protocole sont 
finalisées et les résultats des différents tests peuvent être comparés. 


Sur la base des mesures qui ont été réalisées, il est donc possible de valider les 
hypothèses initiales en s'appuyant sur des données objectives (mesure d’un temps, 
réussite ou non d’une tâche, etc.) ou subjectives (réponses à des questions). 


Le test permet ainsi de répondre concrètement aux questions soulevées initia- 
lement lors de la phase de préparation. L'analyse du comportement des utilisateurs 
permet de comprendre la cause de difficultés rencontrées et de proposer des solutions 
pour Les résoudre. 


Par ailleurs, le test peut également permettre d'identifier d’autres pistes d'améliora- 
tion de l'interface qui ne faisaient pas l’objet de l'étude initiale mais qui sont apparues 
en plaçant l'utilisateur en situation. 


Comme toute démarche participative, le test est l’occasion de recueillir les besoins 
et les attentes des utilisateurs vis-à-vis de l'application. Les retours élicités en situation 
de test sont beaucoup plus pertinents que ceux qui seraient issus d’une simple 
démonstration de l'application car ils s'appuient sur des éléments factuels et objectifs. 


Dunod. 


a 
— 


) 2012 


(C 


Copyright 


7.5 Derniers conseil 


Exemple : Test d'un logiciel pour centre d'appel 
Utilisabilité de la fenêtre principale de l'application : 


La fenêtre principale ne permet pas de réaliser facilement certaines tâches. 


Seuls 2 participants ont réussi à lancer le test de connexion. 
Cause : 

Le libellé du menu « Ouvrir serveur FTP » n'a pas été compris. 
Recommandation : 


Changer le libellé par « Tester la connexion ». 


Figure 7.16 — Les résultats du test. 


7.5 DERNIERS CONSEILS 


Nous venons de le voir, la conception d’une interface homme-machine ou d’un site 
web ne se résume pas à l’application de règles d'ergonomie, c'est aussi un processus de 
développement s'appuyant sur des itérations spécification-évaluation. Cependant les 
maximes suivantes permettront d'éviter de nombreux écueils [Nielsen 93]. 


L'enfer est pavé de bonnes intentions. 


En tant que concepteur, il nous est difficile d’avoir le même point de vue que 
l'utilisateur. C’est en voulant bien faire, qu'on en fait trop ec que les plus grosses 
erreurs sont commises. 


L'utilisateur a toujours raison. 


L'utilisateur connaît Le domaine et le contexte opérationnel dans lequel il se servira 
du logiciel. Ses souhaits sont généralement justifiés car ils répondent à des besoins 
opérationnels. 


L'utilisateur n’a pas toujours raison. 


Pourtant dans certains cas, ce que l'utilisateur pense être bon pour lui, n'est pas ce 
qui lui permettra d’être plus performant. Un test d’utilisabilité permet généralement 
de lui montrer la bonne voie. 


L'utilisateur n’est pas le développeur. 


Dans un projet, il est important que chacun fasse selon ses compétences ; c’est 
aux équipes de développement de prendre les décisions informatiques et non aux 
utilisateurs. 


Chapitre 7. Méthodes de conception des interfaces 


Le développeur n’est pas l'utilisateur. 


L'équipe de développement ne connaît pas suffisamment le domaine applicatif et 
la tâche pour se mettre à la place de l'utilisateur. Lorsque le concepteur pense à la 
place de l'utilisateur, il a de fortes chances de se tromper. 


Le PDG n'est pas l'utilisateur. 


Le PDG, bien qu’il soit client, n'utilise généralement pas le logiciel. Son point de 
vue n'a donc pas le même poids que celui de l'utilisateur final. 


Le mieux est l'ennemi du bien. 


En voulant bien faire, on a tendance à en faire trop, à offrir beaucoup plus de 
fonctionnalités que l'utilisateur n’en a réellement besoin. Cette profusion rend le 
logiciel complexe et difficile à utiliser. Il est préférable de faire simple et pertinent. 


Le détail est essentiel. 


Un détail n'est jamais à négliger en termes d’utilisabilité, car ce sont souvent de 
petits détails, se répétant à chaque utilisation du logiciel, qui empoisonnent la vie de 
l'utilisateur. 


L'aide n’en est pas une. 


L'utilisateur se sert de l’aide parce qu'il ne comprend pas le fonctionnement du 
logiciel. Pour véritablement aider l'utilisateur, il faut qu'il puisse se servir du logiciel 
sans utiliser l’aide. 


7.5 Derniers conseils 


« J'utilise les conseils et astuces présents dans le livre « Ergonomie des interfaces » dans 
mon travail quotidien de consultant E-Commerce. 


L'ouvrage m'a appris que l'ergonomie ce n'est pas seulement du bon sens. H m'a 
permis d'acquérir les bases de l'ergonomie et découvrir la notion d'utilisabilité que j'ai pu 
appliquer aux interfaces des sites de vente en ligne pour lesquels j'interviens. 


La problématique ergonomique se pose pour toute interface mais elle peut coûter très 
cher si celle-ci n'est pas adaptée, surtout pour un site E-Commerce ! 


Dans mon contexte, c'est principalement le chapitre traitant de la navigation web qui m'a 
le plus apporté dont j'utilise toujours les fondements, plusieurs années après l'avoir lu. » 


Kevin CASTELAIN 
Consultant e-commerce. 


« Ingénieur, spécialiste des interfaces homme-machine, j'ai travaillé sur différents types de 
systèmes avec différents langages et différentes contraintes. Le fil conducteur a toujours 
été pour moi de répondre au mieux aux besoins des utilisateurs. 

De ma propre expérience, if n'est pas toujours évident pour un développeur - même 
spécialisé en ergonomie - d'analyser au plus près les besoins des utilisateurs. L'une 
des principales raisons est que celui qui achète (la prestation informatique) n'est pas 
forcément celui qui utilise et celui qui vend n'est pas forcément celui qui réalise. Par 
ailleurs, l'utilisation de méthodes agiles ou participatives, qui permettent d'impliquer les 
utilisateurs finaux, est parfois proscrite. 


Au final l'utilisateur ne se manifeste, dans la plupart des cas qu'une fois le produit livré. 


I est donc essentiel sans utilisateur ‘sous la main", d'avoir ce que l'on pourrait appeler 
"une conscience ergonomique". 


Le plus sage est de respecter des critères ergonomiques (qui ont fait leur preuve). La 
littérature est assez dense sur le sujet (me viennent à l'esprit les critères de Bastien/Scapin 
ou encore les heuristiques de Nielsen). 


J'ai choisi "Ergonomie des interfaces" car il présente de manière complète et illustrée 
la plupart des recommandations ergonomiques qu'il est nécessaire d'avoir à l'esprit. Je 
peux donc m'y référer à volonté. Je sais également qu'il me sera utile dans une utilisation 
plus poussée de méthodes ergonomiques. C'est un point d'entrée à la fois accessible et 
complet. » 


Olivier COSQUER 
Ingénieur Etudes et Développement, Spécialiste IHM. 
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En guise de conclusion, voici, telle que la raconte Dan Norman [Norman 98], l’histoire 
d'une des plus brillantes réussites techniques du début du siècle : le phonographe. 


Le phonographe de Thomas Edison (1877), 


En 1877, Thomas Edison invente le phonographe. Il est persuadé que nous allons 
entrer dans l’ère du zéro papier. Les gens utiliseront son invention pour s'enregistrer 
et ainsi ne plus être contraints par les difficultés de l'orthographe. Il décide donc de 
fabriquer des machines à dicter. 


Or, lire un document est plus rapide qu'écouter un enregistrement. C’est aussi plus 
pratique : la lecture se fait à son propre rythme, il est possible de souligner les passages 
clés, etc. Qui plus est, dicter peut être une perturbation dans un bureau. Qu'à cela ne 
tienne, Edison est convaincu que les utilisateurs s'adapteront à son invention ! 


Pour obtenir la meilleure qualité d'enregistrement, il utilise des cylindres de 
cire. Sur le plan technique, c’est une prouesse. Mais la cire est fragile, les cylindres 
sont encombrants, délicats à fabriquer, à étiqueter et leur durée d'enregistrement est 
rapidement limitée par la longueur du cylindre... 


Une dizaine d'années plus tard, le bilan commercial est catastrophique : Les 
phonographes à cylindre ne se vendent pas. 


Ergonomie des interfaces 


De son côté, Émile Berliner crée en 1890 la Victor Talking Machine Company. Il 
produit des disques préenregistrés et la machine pour les écouter : le gramophone. Le 
gramophone deviendra le Victrola en 1907, un terme qui désignera pendant plus de 
50 ans les tourne-disques, Outre-Atlantique. 


Effectivement, les disques Victor se vendent beaucoup mieux que les phonographes 
d'Edison, tout simplement parce que les consommateurs veulent avant tout écouter 
de la musique. 


Voyant cela, Thomas Edison se lance lui-aussi dans la fabrication de disques en 
1913. Ce qui importe c'est la qualité du son, pense-t-il, obnubilé par la performance 
technique. Aussi décide-t-il d'enregistrer des artistes peu connus, donc moins coûteux, 
dont il ne mentionne même pas le nom sur ses disques ! 


Mais le public veut connaître celui dont il entend la voix. Une musique ce n’est 
pas seulement une partition, c’est aussi un être humain, un chanteur ou un musicien 
qui donne une émotion à partager. 


Lorsque Edison l’a compris, il était trop tard. Tous les grands artistes enregistraient 
déjà chez Victor, et exclusivement chez Victor... 


Thomas Edison ne gagnera pas un sou avec son invention, tandis que Victor 
Talking Machine Company deviendra plus tard RCA qui est encore l’un des leaders 
du domaine. 


Le phonographe d'Edison nous a appris que ce n'est pas tant la prouesse technique 
qui fait le succès d’un produit, mais bien son utilisabilité et le fait qu’il réponde à un 
besoin social. 


ANNEXES 
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A.1 


Sont présentés ici les principaux résultats concernant l'étude de l'individu en situation 
de travail. 


Ces travaux constituent le fondement théorique des recommandations qui ont été 
énoncées dans le livre. 


MODÈLE DU PROCESSEUR HUMAIN 


Les principaux travaux dans le domaine de l'ergonomie du logiciel s'appuient sur le 
modèle du processeur humain [Card 831, lui-même s'inspirant de travaux en psychologie 
cognitive [Broadbent, 1958 ; Newell & Simon, 19721. 


Cette modélisation est particulièrement adaptée à la conception des interfaces 
homme-machine car elle représente l'être humain en phase de traitement des 
connaissances, ce qui est le propre de l’utilisation d’un logiciel (figure A.1). 


Le modèle du processeur humain vise à représenter l’être humain par analogie avec 
l'ordinateur. Il décrit l'individu comme un système prenant en entrée des données, 
les stimuli perceptifs, effectuant des traitements et produisant des sorties, les actions 
motrices. 


Chaque opération est réalisée par un système indépendant. Ainsi, il est possible 
d'établir un parallèle entre le modèle du processeur humain et un système informatique 
(figure ÀA.2). 
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Annexe A, L'être humain en situation de travail 


Figure A.1 — Modèle du processeur humain [Card 83]. 


Système 
moteur 


Système 
cognitif 


Homme interfaces Logiciel 


Système 
perceptif 


Figure AÀ.2 — Un parallèle peut être fait 
entre le fonctionnement du processeur humain et celui d'un logiciel. 


Dans un premier temps, le système perceptif traite les informations reçues du 
monde extérieur. Les stimuli sont mémorisés dans les registres sensoriels sous forme 
analogique. À ce stade, chaque sens est traité de manière indépendante. Le système 
cognitif intègre les informations stockées dans les différents registres sensoriels et 
réalise les opérations, dites cognitives, de traitement des connaissances en déclenchant, 
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au besoin, la recherche d'informations en mémoire. Finalement, le système moteur se 
charge de transcrire l'action décidée par le sous-système cognitif en stimuli musculaires. 


Système cognitif 
Système perceptif Système moteur 


Stimulus —> Registres sensoriels — Mémoire à courtterne —— Réponse — Action 


-vue -raisonnement 
-ouie -codage/décodage 
-toucher recherche informations 


t} 


Mémoire à long terme 
-stockage permanent 
des connaissances 


Figure A.3 — Architecture du processeur humain, 


Cette décomposition met en évidence deux types de mémoires : la mémoire à 
court terme, où ont lieu les opérations cognitives, qui joue le rôle de mémoire de 
travail, et la mémoire à long terme qui sert au stockage des connaissances. 


La mémoire à court terme est la pièce maîtresse du processeur humain. Les 
opérations de traitement des connaissances y sont réalisées, en particulier les processus 
de raisonnement, l'apprentissage et la communication par le langage. 


L'unité de traitement de la mémoire à court terme est appelée le mnème. 


Un mnème est une quantité d’information connue, familière traitée par la mémoire 
à court terme et caractérisée par son unité. Un mnème peut correspondre à un schéma 
de pensée plus ou moins complexe selon l'individu. Ainsi, la suite « 42 78 35 » peut 
être faite de 6 mnènes (« 4»,« 2 »,« 7 »,« 8 »,« 3 » et « 5 ») pour l'enfant qui débute 
la lecture, de 3 mnènes (« 42 », « 78 » et « 35 ») dès lors qu'il a acquis la connaissance 
des nombres ou d’un seul (« 42 78 35 ») s’il s’agit d'un numéro de téléphone, par 
exemple. 


Bien que le contenu sémantique de chaque mnème varie d’un individu à l’autre, la 
capacité de la mémoire à court terme est une caractéristique commune à tous les êtres 
humains : elle est de 7 + 2 mnèmes. 


Ce résultat énoncé par [Miller 56] a été validé par de nombreuses expériences. 
Cependant, certains travaux récents ont mis en évidence le fait qu’on ne se rappelle 
avec précision que de 3 ou 4 mnèmes [Cowan, 2001] et qu'il n’est possible de se 
souvenir de plus d'informations que lorsqu'elles ont un lien avec les précédentes 
[Broadbent 75]. Ainsi, lorsque l’on demande à un individu de verbaliser rapidement 
un grand nombre de concepts connus, par exemple des villes ou des instruments de 
cuisine, il a tendance à Les regrouper par 2 ou 3. 
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Figure A.4 — Structure de la mémoire à court terme [Broadbent 751. 


Ces différents éléments tendent à montrer que la mémoire à court terme pourrait 
être modélisée comme 3 registres, chaque registre pouvant contenir 2 à 3 mnèmes 
reliés entre eux. 

La capacité de stockage de la mémoire à court terme est relativement faible : 7 + 
2, voire 3 où 4 mnèmes [Baddeley, 1991]. C’est pourquoi, lors de la conception d’une 
interface, il convient de minimiser le nombre de données que Putilisareur doit prendre 
en compte, en privilégiant la qualité de l'information à la quantité. 


THÉORIE DE L'ACTION 


La théorie de l’action, élaborée par D.A. Norman, fournit un cadre théorique 
permettant de mesurer la complexité d'utilisation d’une interface homme-machine 
[Norman 86]. Elle part du principe que toute action est un cycle itératif en deux 
temps ; tout d’abord l'utilisateur exécute une commande, puis il évalue la modification 
engendrée par la commande par rapport au but qu'il visait (figure A.5). 


But de l'utilisateur 


w É \ 


Commande(s) Résultat 


N pe 


État du système 


Figure A.5 — Les deux étapes de la théorie de l’action. 
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Une première phase consiste à décliner le but de l’utilisateur en un plan. Celui-ci 
va donner lieu à une série d'actions. Chaque action est exécutée physiquement. L'état 
du monde en est modiñé. L'utilisateur perçoit cette modification. Il l’interprète en 
fonction des connaissances dont il dispose. Finalement, il compare le résultat avec le 
but qu'il s'était fixé (figure À.6). 


# But de l'utilisateur se 


Distance Plan Que faire ? Évaluation Distance 
sémantique sémantique 
d'éxécution d'évalutaion 

Suite d'actions Interprétation 
Distance Distance 
articulattoire Execution Comment le faire ? Perception articulatoire 
d'éxécution d'évaluation 


Action motrice HT 


Figure A.6 — Décomposition du cycle action-évaluation. 


À titre d'exemple, la figure A.7 illustre le cycle de l’action dans le cas où l'utilisateur 
chercherait à « étancher sa soif ». 


But de l'utilisateur 


Étancher sa soif LS 
Évaluation 


Dist Plan Que faire ? Le verre Dist 
istance ue faire ? ; * istance 
: . Prendre un est-il plein ? : j 
id que MS dent SE Pan que 
d'éxécution / d'évalutaion 
, s | on 
Suite d'actions PURE 
Fe Le verre se remplit 
Saisir la carafe. 
Remplir le verre. f 
Porter le verre à la bouche. 
Distance \ Perception ; Distance 
à : ; Visualisation du niveau : | 
articulattoire Execution Comment le faire ? d'eau dans le Verre articulatoire 
d'éxécution Remplir le verre d'évaluation 


LE Action motrice dl 


Figure À.7 — Exemple de cycle action-évaluation. 
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On distingue deux strates dans le cycle de l’action. L'une correspond aux processus 
liés à la compréhension du système : élaboration du plan permettant d'atteindre 
le but et évaluation du résultat (Que faire ?). L'autre regroupe les processus liés à 
la manipulation proprement dite du logiciel : exécution de l’action et perception 
(Comment le faire ?). L’épaisseur de ces strates est représentative de la complexité 
d'utilisation, d’où la notion de « distance » pour mesurer la complexité associée à 
chacune des étapes du cycle de l’action [Hutchins 86]. 


Au niveau conceptuel, la distance sémantique symbolise la distance entre Le but 
visé par l'utilisateur et les actions/objets de l'interface. Elle témoigne de la complexité 
de compréhension du système. Elle mesure la quantité de ressources nécessaires aux 
processus cognitifs liés à la compréhension du système pour choisir les commandes 
afin de réaliser une tâche et déterminer si le but a été atteint en fonction de l’état du 
système. 


Sur le plan de la réalisation, la distance articulatoire figure la distance entre 
l’action et sa représentation physique. Elle atteste de la complexité d'utilisation du 
système. Elle mesure la quantité de ressources nécessaires aux processus cognitifs ec 
moteurs liés à la manipulation du système pour réaliser une commande et percevoir 
l'état du système. 


La réduction des distances sémantiques et articulatoires contribue à diminuer 
les ressources nécessaires aux processus cognitifs/noteurs de compréhension et de 
manipulation du système, c'est-à-dire les ressources nécessaires à la tâche d'utilisation 
du système. En d’autres termes, réduire les distances facilite l’utilisation du logiciel. 
L'exemple typique de la réduction des distances est l'interface à manipulation directe. 


TÂCHE ET ACTIVITÉ 


La tâche est l'objectif que cherche atteindre l'utilisateur ; le résultat qu’il souhaite 
obtenir. Par exemple, lorsque je me sers d’un logiciel de traitement de texte, ma tâche 
consiste à communiquer en rédigeant un document. 


Afin de réaliser une tâche, l'être humain la décompose en problèmes simples. 
[l décline le but principal en sous-buts, puis en actions élémentaires, de façon 
hiérarchique. 


Les informations nécessaires pour mener une tâche sont associées en mémoire à 
cette tâche. Tant que l'objectif initial n’a pas été atteint, les informations relatives à la 
tâche sont actives. Par contre, une fois le but atteint, elles sont généralement oubliées. 


Ce phénomène est à prendre en compte lors de la conception du dialogue homme- 
machine. Ainsi, il a été observé que les utilisateurs des premiers distributeurs de billets 
de banque oubliaient leur carte bancaire dans la machine. En effet, ces distributeurs 
ne rendaient la carte qu'après les billets. Or, le but de l’utilisateur était d'obtenir des 
billets ; une fois ceux-ci en main, il oubliait la carte bancaire, qui n’avait été qu'un 
moyen d'atteindre ce but. Depuis, les distributeurs rendent la carte bancaire avant les 
billets et plus aucune carte n’est perdue. 
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A.3 Tôche et activité 


Tâche 


But 


But Ÿ 
(et) Sous-tâche 


Sous-but Sous-but 


“ 


Sous-sous-but Sous-sous-but 


U 


Procédure 


Action Action 


Figure A.8 — Planification hiérarchique de la tâche. 


Cependant, un même but, un même objectif de tâche, peut être atteint de diverses 
manières selon le contexte. Par exemple, je ne m'y prendrais pas de la même manière 
pour communiquer par écrit selon que je dispose d’un traitement de cexte et de 
beaucoup de temps ou, au contraire, que je n'ai qu'une feuille de papier et 5 minutes 
devant moi. Pour réaliser une tâche selon les moyens qui lui sont attribués et dans des 
conditions données, l'utilisateur déploie une activité. 


L'activité est aussi appelée la « tâche effective », tandis que la tâche est la « tâche 
prévue » ou « prescrite ». En d’autres termes, la tâche désigne ce qui doit être fait, tandis 
que l'activité représente ce qui est fait. 


La différence entre tâche et activité est essentielle. En effet, lors de la conception 
d'un logiciel, on part d'informations sur la tâche {le cahier des charges) et non 
sur l’activité. Or, c'est dans un contexte d'activité que sera utilisé Le logiciel. C’est 
pourquoi il est important de mettre en situation l'utilisateur et de l’observer afin de 
comprendre son activité ; c'est le rôle des tests d’utilisabilité. 


Pour que l'interface homme-machine puisse être adaptée à l’activité des utilisateurs, 
il convient de prendre en compte les diverses stratégies d'utilisation qu'ils peuvent 
mettre en œuvre selon le contexte d'utilisation en offrant une flexibilité dans les moyens 
de dialogue. Par exemple, la commande d'impression peut être déclenchée soit par une 
fenêtre de dialogue permettant de choisir la plage d'impression et le nombre de copies, 
soit directement, mais sans configuration possible, par un bouton. Ainsi, lorsque j'ai 
le temps, j'utilise la fenêtre de dialogue et je bénéficie d'un paramétrage fin, mais si je 
suis pressé, je ne ime sers que du bouton. 
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Annexe A. L'être humain en situation de travail 


Par ailleurs, un logiciel est un outil complexe qui fait appel à des compétences 
spécifiques pour être utilisé. La réalisation d’une tâche informatisée demande en fait 
de mener deux tâches en parallèle : d’une part la tâche métier c'est-à-dire l'objectif 
que l’utilisaceur cherche à atteindre vis-à-vis du monde extérieur, d’autre part la tâche 
système qui consiste à se servir du logiciel proprement dit. Cette dernière rend la 
tâche globalement plus difficile sans pour autant faciliter la réalisation de la tâche 
métier qui est l'objectif premier de l'utilisateur. Par exemple, lorsque l’on utilise un 
logiciel de conception assistée par ordinateur, la tâche métier consiste à concevoir 
une pièce mécanique, tandis que la tâche système correspond à l'emploi du logiciel et 
de l'ordinateur. 


Pour qu'un système informatique soit facile à utiliser, La tâche système ne doit pas 
perturber la réalisation de la tâche métier. L'interface homme-machine doit être la plus 
« transparente » possible : la tâche système réduite au minimum. La prépondérance 
de la tâche système sur la tâche métier a souvent été un facteur de refus du logiciel. 
Inversement, lorsque la tâche système est aisée, le logiciel est mieux accepté. C'est 
pourquoi le Macintosh, avec une représentation graphique et la métaphore du bureau, 
a eu un tel succès, par rapport au PC qui, à l'époque, proposait une interface textuelle. 
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Les critères ergonomiques constituent une typologie des propriétés d’une interface 
homme-machine qui vont conditionner son utilisabilité. 


Les critères présentés dans ce chapitre sont issus des travaux de J.-C. Bastien 
[Bastien 93] et repris dans la norme AFNOR Z67-133-1. Il y a un relatif consensus des 
chercheurs du domaine sur cet ensemble de critères. Ils se retrouvent également dans 
la grille d'évaluation de l’université de Purdue [Lin 97] et dans les règles d'évaluation 
heuristique de ]. Nielsen [Nielsen 93]. 


Les critères sont employés de deux manières. Ils permettent d'évaluer l’utilisabilité 
d’un logiciel et servent de guide lors de la conception des interfaces homme-machine. 
Nous les présentons ici en donnant d'une part une définition du critère, utile à 
l'évaluation, et d'autre part des recommandations illustrant la façon de le mettre 
en œuvre en phase de conception. 


B.1 COMPATIBILITÉ 


La compatibilité est la capacité du logiciel à s'intégrer dans l’activité réelle des 
utilisateurs. Ce critère mesure l'adéquation du logiciel avec l’environnement de travail 
dans lequel il est utilisé. L'objectif est de réduire le transfert de connaissances nécessaire 
pour passer du métier au logiciel. La logique d'utilisation du système doit correspondre 
à la logique de l'utilisateur. 


La compatibilité consiste à prendre en compte à tous les niveaux de la conception 
de l’interface homme-machine, le contexte réel d'utilisation. Lorsque le logiciel est 
adapté à son usage, l'utilisateur s'en sert plus facilement car il répond mieux aux 
exigences du terrain. 
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Annexe 8. Critères ergonomiques 


Critères Description 


Compatibilité Adéquation du logiciel ou du site vis-à-vis de son utilisateur. 
+ Employer le vocabulaire métier. 


Guidage Moyens permettant de s'orienter dans l'utilisation du logiciel 
ou du site. 
+ Inciter l'utilisateur à effectuer des actions spécifiques. 
+ Regrouper visuellement les informations de même type, 
< Fournir un retour aux actions utilisateur et rendre visible 
le fonctionnement du système. 
+ Faciliter la perception des informations. 


Homogénéité Uniformité de la logique d'utilisation et de représentation. 
+ Concevoir un fonctionnement cohérent et un graphisme 
homogène. 


Flexibilité Variété des procédures permettant d'atteindre un même 
objectif. 
+ Offrir à l'utilisateur différentes manières de réaliser la 
même tâche. 


Contrôle Maîtrise des traitements réalisés par le système. 
+ Ne déclencher que les commandes explicitement 
demandées par l'utilisateur. 
+ Permettre à l'utilisateur de toujours « garder la main ». 


utilisateur Protection contre les erreurs et correction. 
+ Prévenir et détecter rapidement les erreurs. 
+ Présenter des messages d'erreur pertinents et permettre 
une correction facile des erreurs, 


Traitement des erreurs Réduction des activités de perception et de mémorisation. 
Charge mentale + Limiter le travail de lecture, la saisie et le nombre 
d'étapes nécessaires à l'accomplissement d'une tâche. 


Figure B.1 — Les critères ergonomiques sont les principales règles à suivre 
pour que le logiciel ou le site web soit utilisable. 


Parler le langage de l'utilisateur. 
Présenter les informations de façon cohérente par rapport aux autres supports de travail. 
L'accès aux commandes doit être compatible avec la tâche de l'utilisateur. 


Considérons, par exemple, un logiciel destiné à un gérant de magasin dont la tâche 
peut être modélisée comme sur la figure suivante. 


L'accès aux commandes du logiciel se fait depuis une barre de menu. Deux 
présentations sont envisageables. Lorsque la disposition des menus est compatible 
avec la tâche, l'utilisateur accède plus rapidement aux commandes. 
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8.2 Guidage 


Gérer le 
magasin 
Étabiir te bilan Vérifier les Contrôler les 
des ventes commandes stocks 


es eue DE ue men DT me re 


Éditer Imprimer _ Transmettre Éditer Imprimer Transmettre Éditer Imprimer Transmettre 
le bilan le bilan le bitan le dossier des le dossier des le dossier des l'état l'état l'état 
desventes desventes  desventes commandes commandes commandes  desstocks desstocks des stocks 


Figure B.2 — Pour cet exemple, la tâche de gestion du magasin se décompose en trois 
sous-tâches : Etablir le bilan des ventes, Vérifier les commandes et Contrôler les stocks. Chacune 
d'entre elles donne lieu aux trois mêmes opérations : Edition, Impression ou Envoi. 


Éditer imprimer Envoyer Ventes Commandes Stocks 
Ventes Ventes Ventes Éditer Éditer Éditer 
Commandes Commandes Commandes Imprimer Imprimer Imprimer 
Stocks Stocks Stocks Envoyer Envoyer Envoyer 


B.2 


Figure B.3 — Compatibilité : la barre de menu (a) tire parti de la similarité fonctionnelle entre les 
commandes, mais elle oblige l'utilisateur à ouvrir un nouveau menu pour chaque opération. Au 
contraire, l’organisation {b) calquée sur la tâche permet de retrouver toutes les commandes 
relatives à une sous-tâche dans un même menu. Cette dernière obéit au critère de compatibilité. 


GUIDAGE 


Le critère de guidage regroupe l’ensemble des moyens mis en œuvre pour assister 
l'utilisateur dans l'emploi du logiciel, c’est-à-dire lui faire connaître l’état du système et 
lui permettre d'établir des liens de causalité entre ses propres actions et l'état résultant. 


L'objectif est de faciliter l'utilisation du système et son apprentissage. En effet, Le 
guidage rend Le logiciel plus convivial car lutilisateur comprend mieux ce que l’on 
attend de lui : il hésite moins. L'apprentissage est facilité car le fonctionnement du 
système apparaît clairement. 


On considère habituellement deux types de guidage. Le guidage explicite correspond 
aux différents messages émis par le système afin d'informer l'utilisateur sur son 
fonctionnement, par exemple des textes explicatifs. Le guidage implicite regroupe les 
différents artifices de présentation qui sont employés pour guider l’utilisateur, comme 
le fait de griser les commandes inactives par exemple. 


Ce critère est décomposé en quatre sous-cricères [Bastien 93] présentés ci-après. 
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incitation 


Le critère incitation réunit les différents moyens visant à conduire l’utilisateur à 
effectuer des actions spécifiques. L'incitation consiste à aider l'utilisateur dans son 
interaction avec le logiciel en lui fournissant les éléments nécessaires pour l'utiliser 
correctement. Il évite des apprentissages fastidieux et réduit le risque d'erreur. 


Griser les commandes non disponibles. 
Fournir la liste des saisies attendues. 
Donner le format de saisie des données. 


Groupement/Distinction 


Quand il découvre pour la première fois un outil, l'être humain applique le principe de 
similarité : « Ce qui se ressemble, fonctionne de la même manière ». L'utilisateur comprend 
plus facilement le fonctionnement du logiciel lorsque les informations de même type 
sont regroupées, et inversement, que les données distinctes apparaissent sous une 
forme différente. 


Le groupement s'appuie sur deux attributs graphiques : le format de présentation 
de la donnée (couleur, forme, syntaxe, etc.) et sa position à l'écran. Lorsque les 
informations se rapprochent à l'écran, soit par leur graphisme, soit par leur position, 
l'utilisateur fait l'hypothèse qu’elles fonctionnent de la même manière. 


Réservation x | | 


Non : | | (Nom, Prénom] 


Adresse : (Rue, Code postal, Ville) 


Séance : Le — À {M = matinée, $ = soirée) 
Nb de places : | 


Déplacer le curseur : Ffèches - Valider : Entrée : Abandonner : ESC Valider 


Figure B.4 — Guidage par incitation : les indications guident la saisie 
en précisant de façon explicite la syntaxe de chaque champ de la fenétre. 


Regrouper les informations de même type par le format ou par la position. 
Distinguer les informations différentes. 


82 Guidage 


Ventes Commandes Texte Dessin Quitter 
Nouveau Couper Police... Associer 

Ouvrir. Copier Taille. Dissocier 

Fermer Coller interligne.. Avancer 

Enregist. Effacer Reculer 


Figure B.5 — Guidage par groupement : chaque menu présente à l'utilisateur un ensemble 
cohérent de commandes, facilitant ainsi la mémorisation et l'apprentissage du logiciel. 


Retour utilisateur 


Le critère de retour utilisateur (feed-back) réunit les différents comportements de 
l'interface homme-machine visant à montrer le fonctionnement du système, en 
signalant ce que fait le logiciel et en fournissant un retour aux actions utilisateur. 


Ce critère contribue à accroître la confiance dans le système. Lorsque le logiciel 
fournit des retours, l'utilisateur établit le lien entre les actions qu'il effectue et l'état 
résultant. Il comprend mieux le fonctionnement et l’accepte plus facilement. 


Le logiciel doit répondre aux actions de l'utilisateur par un changement de présentation de 


l'interface. 

Indiquer les modes de fonctionnement du système. 
Signaler les traitements longs par un message d'attente. 
Toujours faire apparaître les saisies utilisateur. 


Rendre visible les traitements réalisés par le logiciel. 


 — © 


L 


Figure B.6 — Guidage par retour utilisateur : 
la modification du pointeur souris montre qu'un traitement est en cours. 
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Lisibilité 


Copy! IQNC ( 


Dans la mesure où elle facilite la perception des informations, la lisibilité contribue 


aussi au guidage. Lorsque la lecture est facile, l'utilisateur comprend mieux le 
fonctionnement du logiciel. 


Utiliser une police droite. 
Employer des lettres sombres sur un fond clair. 


) 
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B.3 HOMOGÉNÉITÉ 


Le critère homogénéité concerne la cohérence globale de l'interface homme-machine. 
L'objectif est de respecter une logique d'utilisation constante, tant au niveau de la 
façon d'exécuter les commandes que de la représentation des données : le graphisme, 


la position des informations, le vocabulaire et le format des données doivent être 
cohérents d’une fenêtre à l’autre. 


L'homogénéité rend le système stable, donc prévisible aux yeux de l'utilisateur. 
Le temps de recherche de l'information est diminué. Le logiciel est plus facile à 
apprendre : ce qui est appris dans un cas peut être généralisé à l'ensemble du logiciel. 


Les fenêtres doivent suivre le même schéma d’agencement. 
La sémantique des boutons de la souris doit être constante. 
Le même vocabulaire doit être utilisé pour l'ensemble du logiciel. 


Agenda Agenda 

Organiser son emploi du temps Organiser son planning 

Liste des rendez-vous Visualiser les rendez-vous 

Recherche d'une adresse Chercher une adresse 
Déconseillé Préférable 


Figure B.7 — Homogénéité : la lecture est plus facile lorsque les commandes suivent la même 
syntaxe. C'est le cas du menu (b) où les items sont tous construits en verbe + nom. 


B.4 FLEXIBILITÉ 


La flexibilité est la capacité de l'interface homme-machine à s'adapter à différents 
contextes d'utilisation. En effet, un logiciel est destiné à être utilisé par différentes 
personnes qui ne s’en serviront pas de la même manière selon leurs connaissances, 
selon les particularités de leur tâche et selon leurs habitudes de travail. Lorsque 


l'utilisateur peut choisir la façon de faire qui lui convient le mieux, le logiciel est plus 
facile à utiliser. 


La mise en œuvre de ce critère consiste à fournir plusieurs moyens pour réaliser la 
même tâche. Bien entendu, il convient que les différents moyens proposés soient effec- 
tivement complémentaires et qu'ils soient adaptés à différents contextes. L'objectif est 
que l'utilisateur choisisse Le moyen qui lui convient le mieux selon les conditions dans 
lesquelles il doit mener sa tâche. 


Permettre d'activer les commandes à la fois au clavier et à la souris. 
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8.5 Contrôle utilisateur 


B.5 


Permettre à l'utilisateur de paramétrer le logiciel selon ses préférences. 
Fournir un moyen rapide pour accéder aux commandes des menus. 


Un exemple typique d'application de ce critère consiste à doubler l'accès aux 
commandes des menus par des raccourcis clavier, Ainsi, les utilisateurs débutants 
bénéficient du guidage fourni par le menu, tandis que les utilisateurs expérimentés 
profitent, une fois appris, de la rapidité du raccourci clavier. 


CONTRÔLE UTILISATEUR 


Le critère de contrôle utilisateur concerne le degré de maîtrise de l'utilisateur sur les 
traitements réalisés par Le système. L'objectif est que l'utilisateur comprenne mieux le 
fonctionnement du système. 


Le contrôle utilisateur vise à rendre l'utilisateur autonome dans son interaction 
avec le logiciel en lui donnant la maîtrise du processus. L'apprentissage en est facilité. 
Les erreurs sont moins nombreuses, la performance est donc meilleure. De ce fait, le 
logiciel est mieux accepté par l'utilisateur. 


[Bastien 93] distingue deux niveaux de contrôle. Le premier (actions explicites) 
concerne le fait que seules les opérations demandées par l'utilisateur sont réalisées par 
le système. Le second (contrôle utilisateur) dénote le degré de maîtrise de l’utilisateur 
sur les traitements effectués, l'objectif étant que l'utilisateur ait toujours le contrôle 
sur le logiciel. 


Valider explicitement les commandes importantes ou difficilement réversibles. 
Offrir la possibilité d'interrompre les traitements longs. 
Autoriser les retours en arrière. 


Ca \\ ed), 7 | er 
Actu - — ve 
Annuler Image (Ctri=2) j 
= $ Couper 


Figure B.8 — Contrôle utilisateur : le bouton « Défaire » (Undo) autorise l'utilisateur à revenir sur 
l'état précédant l'exécution de la dernière commande. Ce bouton permet d'éviter des erreurs et 
minimise le stress. 


B.6 TRAITEMENT DES ERREURS 


Le traitement des erreurs regroupe les différents moyens visant à protéger l'utilisateur 
des erreurs et à lui permettre de Les corriger. L'objectif est de minimiser Les interruptions 
dues aux erreurs. 
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Éviter les erreurs. 
Permettre une correction aisée des erreurs. 
Faciliter l'exploration et l'apprentissage du système. 


B.6.1 Protection contre les erreurs 


Le critère de protection contre les erreurs concerne les techniques visant à éviter les 
erreurs. [l consiste d'une part à guider l'utilisateur pour éviter qu'il ne commette 
des erreurs (c’est en fait du « guidage »}, d'autre part à détecter les erreurs et alerter 
l'utilisateur. 


Griser les commandes non disponibles. 
Fournir la liste des valeurs possibles. 
Détecter les erreurs au plus tôt. 
Minimiser les saisies clavier. 

Prévenir les risques de perte de données. 


Supprimer Ea 


Voulez-vous supprimer cet objet ? 
Ilne sera plus possible de le récupérer. 


Supprimer Annuler 


Figure B.9 — Traitement des erreurs : un message de demande de confirmation peut permettre 
de protéger l'utilisateur contre la destruction involontaire d'une donnée importante. Notons 
toutefois qu'il ne suffit pas d'un message pour protéger efficacement des erreurs. D'autres moyens 
doivent également être mis en œuvre, en particulier le guidage qui contribue à une meilleure 
compréhension du logiciel. 


B.6.2 Correction des erreurs 


Le critère de correction des erreurs tend à dédramatiser l'erreur aux yeux de l'utilisateur. 
Lorsqu'il peut facilement corriger ses erreurs, il perd moins de temps. L'erreur devient 
moins grave. 


Pour que la correction de l'erreur soit aisée, deux exigences doivent être prises 
en compte. D'une part, le message d'erreur doit indiquer la nature de l'erreur et les 
moyens de la corriger. D'autre part, la correction doit être possible, c'est-à-dire que 
l'utilisateur doit pouvoir accéder à la donnée erronée. 


Placer le message d'erreur là où l'utilisateur est censé regarder. 


Copyright © 2013 Dunod. 


B.7 Charge mentale 


Mettre en évidence le champ erroné. 
Afficher des messages d’erreur explicites, brefs, non réprobateurs et autosuffisants. 


Microsoft Excel 


X 


Figure B.10 — Pour être efficace, un message d'erreur doit pouvoir être compris rapidement par 
l'utilisateur. Ce n'est pas toujours le cas. 


B.7 CHARGE MENTALE 


Le critère charge mentale (appelé aussi concision) regroupe l'ensemble des moyens 
visant à réduire la charge perceptive et mnésique de l'utilisateur. L'objectif est d’allouer 
le maximum de ressources au système cognitif (voir section A.1) et d'éviter les erreurs 
en réduisant les stimuli. Il vise à diminuer le nombre d'informations que l'utilisateur 
doit prendre en compte et à simplifier les actions qu’il doit réaliser. 


N'afficher que les informations pertinentes. 
Réduire le nombre d'actions élémentaires pour atteindre un objectif donné. 


Mettre en œuvre ce critère consiste à concevoir un dialogue simple, c’est-à-dire 
limiter le travail de lecture, de saisie et les étapes nécessaires à l'accomplissement de 
la tâche. 


Minimiser les saisies. 

Éviter les textes trop verbeux. 

Ne pas demander de saisir des informations qui peuvent être calculées par le système. 
Éviter à l'utilisateur d'avoir à se souvenir d'informations d'une fenêtre à l'autre. 
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60% 


20 | 15 | 30 

40 | 22 | 21 5% 
33 | 10 | 20 

X -vU’z x Y z 


Figure B.11 — Charge mentale : Lorsque les informations sont affichées de façon à en faciliter 
l'exploitation, elles sont plus simples à comprendre car elles répondent directement au besoin de 


l'utilisateur. C'est le cas du graphique (b}, plus rapide à interpréter que le tableau (a). 


B.8 CHECK-LIST D'ÉVALUATION ERGONOMIQUE 


La check-list ci-après permet de vérifier que les critères ergonomiques [Bastien 
93] sont correctement pris en compte. C'est une manière d'évaluer rapidement 
l'utilisabilité d’un logiciel. 


Cette check-list est générale. Elle demande à être adaptée en fonction de l’applica- 
tion à évaluer (pour un site web, voir l’annexe C). 


B.8.1 Compatibilité 


Le logiciel cotrespond-il au contexte d'utilisation ? 


Est-il adapté au profil des utilisateurs visés ? (Par exemple, les utilisateurs ont-ils 
une expérience bureautique ?) 


Le langage de l'interface est-il celui employé par les utilisateurs ? 


Les informations sont-elles présentées de manière cohérente par rapport aux 
autres supports de travail ? 


L'accès aux commandes est-il adapté au contexte de réalisation de la tâche ? 


B.8.2 Guidage 


L'utilisateur est-il assisté dans la façon de se servir du logiciel ? (Par exemple, le 
logiciel fournit-il Le format de saisie des données, une liste de valeurs possibles, 
etc. ?) 


Les informations de même type sont-elles regroupées ? 

Distingue-t-on les données différentes ? 

Le système fournit-il un retour aux actions de l'utilisateur ? 

Les modes de fonctionnement du système sont-ils visibles ? 

Les opérations réalisées par le système sont-elles connues de l'utilisateur ? 


B.8 Check-list d'évaluation ergonomique 


e Les informations sont-elles correctement lisibles ? 


e Une aide en ligne est-elle proposée ? 


La documentation est-elle claire ? 


LA LFP A 
B.8.3 Homogénéité 
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L'agencement des fenêtres est-il semblable (tracé régulateur) ? 


Les couleurs, les icônes et les polices de caractères sont-elles utilisées de façon 
cohérente ? 


e Les formats de présentation des données sont-ils constants ? 

e Un vocabulaire uniforme est-il utilisé dans l’ensemble des fenêtres ? 

+ Le fonctionnement de la souris est-il cohérent ? 

B.8.4 Flexibilité 

e Différents moyens sont-ils proposés à l'utilisateur pour déclencher les mêmes 
commandes ? 

e Les commandes sont-elles également accessibles au clavier ? 

e Une alternative rapide est-elle proposée à l'utilisation des menus (par exemple 
des raccourcis clavier} ? 

L] 


L'utilisateur peut-il paramétrer le logiciel selon les préférences ? 


B.8.5 Contrôle utilisateur 
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Les commandes sont-elles toujours explicitement activées par l’utilisateur ? 


L'utilisateur peut-il quitter, abandonner facilement, interrompre un traitement 
en cours ? 


Est-il possible de revenir en arrière ? 


B.8.6 Traitement des erreurs 


Est-il possible d'explorer le logiciel ? 


Le système offre-c-il des moyens pour éviter les erreurs (bouton grisé, liste des 
valeurs possibles.) ? 


L'utilisateur est-il prévenu rapidement de son erreur ? 
L'utilisation du clavier est-elle minimale ? 

Existe-t-il un moyen de récupérer des données détruites ? 
La cause de l'erreur est-elle aisément identifiable ? 

Les erreurs peuvent-elles être facilement corrigées ? 

Les messages sont-ils visibles ? 

Les messages sont-ils explicites ? 


272] 2 Annexe B. Critères ergonomiques 


B.8.7 Charge mentale 


e L'affichage demande-t-il un effort de perception ? 

e L'afhchage répond-il à la demande de l'utilisateur ? 

+ Les activités de mémorisation sont-elles réduites au minimum ? 
e Le texte des fenêtres est-il concis ? 

e Les saisies sont-elles réduites au minimum ? 

e Le nombre d'étapes pour réaliser une procédure est-il faible ? 

+ Existe-t-il des raccourcis ? 
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Cette check-list fait la synthèse des différentes recommandations énoncées dans les 
chapitres traitant des sites Internet. Elle sert d’aide-mémoire et permet de vérifier, à 
chaque étape de la conception, si les critères d'utilisabilité ont bien été pris en compte. 


Bien entendu, il s’agit là d’une approche a priori. Elle permet seulement d'identifier 
des problèmes potentiels, mais elle ne vaut pas un véritable test d’utilisabilité. 


Afin de pouvoir servir au plus grand nombre, cette check-list est volontairement 
générale. Pour l’appliquer efficacement, il est préférable de l'adapter aux spécificités 
du site à concevoir. 


C.1 DÉFINITION ET CIBLAGE 


e Quels sont les objectifs du site ? 
+ Quels sont les principaux messages à transmettre au travers du site ? 
+ Comment allez-vous persuader les internautes de la pertinence de ces messages ? 


+ À qui s'adresse le site ? Quel est le profil des utilisateurs (catégorie socio- 
professionnelle, habitude de l'ordinateur) ? 


+ S'il existe plusieurs cibles, quelle est la cible principale ? 


+ Quelles questions se pose l'utilisateur lorsqu'il va sur le site ? Quels problèmes 
cherche-t-il à résoudre ? 


e Quelle est son attente ? 
+ Dans quel contexte va-t-il se poser ces questions ? 
e Peut-on définir un scénario d'utilisation cypique ? 
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e Des sites concurrents, ou du même type, ont-ils été évalués ? 


e Que pensent les utilisateurs de ces sites, voire des autres médias offrant ce type 
de service ? 


e Une stratégie de lancement du site a-t-elle été élaborée ? 

e Le processus de mise à jour du site est-il défini ? Qui va entretenir le site ? 

e Des moyens ont-ils été mis en œuvre pour recueillir des retours d'utilisation ? 
+ Les outils permettant d'établir les statistiques d'utilisation ont-ils été choisis ? 


C.2 STRUCTURE 


e L'arborescence du site est-elle régulière ? 


e Le site est-il organisé en largeur d’abord (8 sous-rubriques maximum par 
niveau) ? 


e La profondeur est-elle minimale (3 ou 4 niveaux maximum) ? 
e Les rubriques répondent-elles aux questions de l'utilisateur ? 
e Les rubriques regroupent-elles des informations de même type ? 


C.3 NAVIGATION 


e L'internaute a-t-il le moyen de savoir où il est dans le site ? 
+ _Visualise-t-il la position de la page courante par rapport au reste du site ? 
e Dispose-t-il en permanence d’une vue globale des différentes rubriques du site ? 


e L'ordre dans lequel sont présentées les rubriques est-il cohérent avec la façon 
dont l'utilisateur les consulte ? 


+ L'internaute peut-il naviguer uniquement à partir des liens fournis dans les pages 
du site ? 

+ Les choix proposés à l'utilisateur sont-ils suffisamment explicites pour être 
effectués rapidement ? 


C.4 COMPOSANTS DE NAVIGATION 


+ Une zone de navigation persistante apparaît-elle à l'identique sur toutes les 
pages du site ? 

+ Est-elle visible quelle que soit la taille de la fenêtre ? 

e La page courante est-elle mise en évidence dans la barre de navigation ? 


+ Lorsque la page dépasse la taille de l'écran, la zone de navigation est-elle répétée 
en bas de page ? 


e Une navigation contextuelle est-elle proposée ? 
e Une alternative est-elle proposée aux menus déroulants ? 
e Le graphisme des onglets est-il explicite ? 
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C5 Liens 
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Un onglet est-il sélectionné sur la page d'accueil ? 

Si une liste de sélection est utilisée pour la navigation, un bouton lui est-il 
associé ? 

Un texte explique-t-il le rôle des boutons graphiques ? 


Certains boutons font-ils référence au fonctionnement du navigateur (suivant, 
précédent...) ? 


Si un texte est associé à un rollover, est-il correctement visible ? 
Le chemin de progression apparaît-il clairement sur la page ? 
La présentation du chemin de progression respecte-t-elle le standard ? 


La page courante est-elle indiquée dans le chemin de progression ? 


C.5 LIENS 


Le comportement des liens est-il standard ? 

Les liens sont-ils suffisamment grands pour être faciles à sélectionner ? 
Le soulignement surcharge-t-il la page ? 

La lecture est-elle interrompue par l’utilisation des liens ? 

Le texte des liens est-il facile à comprendre ? 

Le texte des liens reflète-t-il les concepts importants de la page ? 

Le même lien est-il répété sur la page ? 


Le libellé des liens est-il cohérent ? La même page est-elle toujours indiquée par 
un lien de même nom ? 


Le texte du lien correspond-il avec le titre de la page ? 


L'internaute est-il prévenu lorsqu'un lien le conduit vers un document volumi- 
neux ? 


Les liens vers d’autres sites restent-ils dans la même fenêtre ? 


C.6 ORGANISATION DE LA PAGE 


Le tracé des pages est-il homogène ? 

Les informations semblables sont-elles présentées de la même manière sur la 
page ? 

Les informations importantes apparaissent-elles au centre ? 

Les informations importantes sont-elles mises en évidence ? 


La présentation de la page reflète-t-elle la façon dont les informations sont 
structurées ? 


Les titres reflètent-ils le contenu des pages ou des paragraphes ? 
Les pages dépassent-elles la taille de l'écran ? 
Le contenu de la page est-il suffisant ? 
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Annexe C. Check-list de conception d'un site web 


La navigation à l’intérieur de la même page se limite-t-elle au retour en haut de 
page ? 

Les pages se chargent-elles suffisamment vite ? 

La page est-elle lisible en 800 x 600 ? 

L'utilisateur peut-il lire la page sans se servir des barres de défilement horizontal ? 
Des jeux de cadres ont-ils été employés ? Si oui, est-ce justifié ? 


C.7 PAGE D'ACCUEIL 


La page d'accueil permet-elle à l'internaute de comprendre la vocation du site, 
d'identifier son contenu et les services proposés ? 


Des éléments d'information sont-ils fournis sur la page d'accueil ? 

L'audience du site peut-elle s'identifier dès la page d'accueil ? 

L'utilisateur comprend-t-il la navigation dans le site depuis la page d'accueil ? 
Des écrans d'introduction sont-ils employés avant d'arriver sur ce site ? 

La page d'accueil est-elle suffisamment légère pour s'afficher en moins de 
10 secondes ? 

Un mode d'accès rapide aux pages intérieures est-il prévu pour les utilisateurs 
expérimentés (moteur de recherche) ? 


C.8 GRAPHISME 


L'ensemble du site suit-il une charte graphique cohérente ? 

Une feuille de style a-t-elle été définie pour le site ? 

A-t-on limité le bruit visuel ? 

Le choix des images est-il justifié ? 

Les textes sont-ils lisibles ? 

Le chargement des images a-t-il été optimisé ? L'affichage est-il progressif ? 

La qualité graphique de l’image est-elle suffisante ? 

Une description alternative a-t-elle été définie pour les images (attribut alt) ? 
Dans le cas d’une image cliquable, les zones actives sont-elles visibles ? 
L'emploi des animations est-il justifié ? 

L'internaute a-t-il la possibilité de stopper ou de sauter l'animation ? 

Un texte doit-il être lu sur la même page que l'animation ? 

L'utilisation d'un composant spécifique (par exemple Flash ou Java) est-elle 
justifiée ? 

Le format utilisé est-il adapté au cype d’image (GIF ou JPEG) ? 

La palette de couleurs est-elle web-safe ? Sinon, est-ce justifié ? 
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C9 Texte 
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C.9 TEXTE 


L'information importante apparaît-elle en haut de page ? 


Les éléments importants du texte ressortent-ils lorsqu'on balaye la page des 
yeux ? 


Les titres aidenc-ils l'utilisateur à s'orienter dans la lecture de la page ? 


Les liens permetrent-ils d'accéder à des informations complémentaires au texte 
courant ? 


Les textes sont-ils justifiés à gauche ? 

Certains textes sont-ils soulignés ? 

L'internaute peut-il imprimer le texte ? 

Le vocabulaire employé est-il compréhensible par l’utilisateur ? 

La page est-elle rédigée dans un style concis ? 

Le langage utilisé est-il simple ec objectif ? 

Le texte commence-t-il par la conclusion ? 

L'accès aux informations est-il hiérarchisé ? 

Le contenu de la page peut-il être compris sans lire Le reste du site ? 
Les informations publiées sont-elles pertinentes ? 

Des listes à puces sont-elles employées pour structurer le texte ? 
Un même ensemble de graphiques est-il utilisé pour toutes les puces du site ? 
Le choix des polices est-il justifié ? 

L'internaute peut-il modifier la taille de la police de caractères ? 

Le texte est-il lisible sans effort ? 


C.10 FORMULAIRES 


Le formulaire propose-t-il par défaut les valeurs les plus courantes pour les 
champs ? 


Le site fournit-il à l'internaute les informations nécessaires pour remplir les 
champs ? 

Les saisies sont-elles réduites au minimum ? 

Les entrées obligatoires sont-elles clairement indiquées ? 

Les items des listes sont-ils affichés dans un ordre logique pour l'utilisateur ? 
Des boutons ont-ils été préférés aux listes de sélection ? 
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l'accessibilité et l'architecture de l'information. Les articles sont répartis selon 
quatre thématiques : questions existentielles, principes, éléments d'interface et 
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fondamentales sur la conception ergonomique de site web et sur l'ergonomie 
en général. Il y présente en détail une méthode de développement « orienté 
utilisateur » de site web. 


http:fluww.ergoweb.ca 


+ Human Factors International — Le site Human Factors International comporte, 
entre autres, une synthèse, illustrée d'exemples, des principales règles d'ergono- 
mie à -suivre lors de la conception des interfaces homme-machine. 
http: /fwuav. humanfactors.com 


e Industrial USability Reporting — Ce site créé à l'instigation de l’Institut améri- 
cain des normes (US National Institute of Standards and Technology, NIST) vise à 
promouvoir la pratique de l’utilisabilité en normalisant les tests d’utilisabilité 
afin de partager les résultats entre associations de consommateurs. 
hetp://aing.ncsl.nist.govliusr 
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e Information & Design — Ce site présente les principales méthodes employées 
en ergonomie informatique dans les phases d'analyse, conception et évaluation. 


hetp:/lunww. infodesign.com .au 

e LukeW 
Luke Wroblewski est expert en utilisabilité et cofondateur de Bagcheck Inc. 
Auteur et conférencier, il partage sur son site nombre de ressources sur la 
conception des interfaces. 
het: /fwww. lukew.com/ 

e SELF - Le site de la Société d'ergonomie en langue française présente l'association 
et fournit des renseignements utiles sur l'ergonomie et le métier d'ergonome. 
het: {funwvw.ergonomie-self.org 

e STC Usability Web Site — Le groupe d'intérêc sur l’utilisabilité de la STC 
(Society for Technical Communication) a rassemblé sur ce site une profusion de 
ressources sur la pratique de l’utilisabilité. 
hetp:/fuww.stesig.orglusability 

° The UX Bookmark - Abhay Rautela propose des ressources pour les profession- 
nels du facteur humain et des IHM, designers d'interaction, et architectes de 
l'information. 


heth:/fwww. d euxbookmark + com 


+ UPA - Le site de l'UPA (Usability Professionals’ Association) est une mine de 
ressources sur la démarche centrée utilisateur. La méthode et les bénéfices de 
la démarche y sont présentés en détail. On trouve également sur le site de 
nombreuses ressources pour mettre en place une démarche ergonomique. 
heth:ffumwuw. upassoc.org 


° Usabilis — Usabilis est la société de conseil fondée par Jean-François Nogier. La 
rubrique « Ressources » du site décrit les principales méthodes de conception 
orientée utilisateur. On y trouvera également des articles sur l'ergonomie 
appliquée à la conception des applications informatiques. 
hup:fhwww.usabilis.com 

+ Usability Body of Knowledge — Usability Body of Knowledge est un site 
collaboratif (wiki) visant à présenter les différents aspects du métier d’ergonome. 
Les principales méthodes de la démarche y sont décrites. 
hetp:fluww.usabilieybok.org 

+ Usability First — Le site de l'agence de conception de site web Diamond Bullet 
introduit la pratique de l’utilisabilité et présente des ressources sur le sujet. 
htp:/luww.usabilityfrst.com 


e Usability Institute — Le Usability Institute propose non seulement plusieurs 
livres blancs et articles sur l’utilisabilité, mais aussi une bibliothèque de com- 
posants génériques pour des applications web, comportant une feuille de style, 
des icônes et des boutons. On trouve aussi sur Le site un modèle d'exigences 
ergonomiques à inclure dans les appels d'offres. 


hetp: flan. usabiliryinstitute.com 
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e Usability.gov — Ce site présente une liste impressionnante de ressources sur la 


pratique de lutilisabilité. Il comporte en particulier un recueil de recommanda- 
tions pour la conception de sites web dans lequel chaque règle est pondérée par 
deux critères : son importance dans la réussite du site (Relative Importance) et la 
force des preuves venant appuyer cette recommandation (Strength of Evidence). 
Ces éléments vont faciliter les choix de conception et les compromis inévitables 
lors du développement du site. 

hup:/fusability.gov 

Usable Web — Usable Web, maintenu par Keith Instone, comporte une multi- 
tude de liens sur la pratique de l'utilisabilité, en particulier sur la conception 
des sites web. 


http:/luwww.usableweb.com 


User Interface Engineering — Le site User Interface Engineering contient 
plusieurs livres blancs sur la problématique de l'ergonomie lors de la conception 
d’un service en ligne. Il publie une lettre d’information sur l’utilisabilité des 
technologies web. Son fondateur principal n’est autre que Jared M. Spool, 
illustre spécialiste de l'ergonomie des interfaces informatiques. 


htp:/lwunw uie.com 


Blogs et webzines sur et autour de l'ergonomie informatique 


60 questions — Jean-Marc Hardy livre son expérience et ses réflexions sur 
les bonnes et mauvaises pratiques en matière de conception de sites web, en 
mettant l'accent sur les innovations qui enrichissent ou simplifient le Web. 


hetp:/lblog.60questions.net 


AccessiBlogue -Blogue (québécois) promoteur de l'accessibilité des contenus 
Web aux personnes handicapées et vieillissantes, de la normalisation (WCAG, 
SGQRT, etc.) et enjeux. 

hetp:flaccessibiliteweb.comaccessiblogue 


Adaptive Path — Cabinet de conseil en ergonomie web, propose une lettre 
de diffusion et des articles de fond traitant de la conception des sites et de la 
pratique de l’utilisabilité. 

hecb:fhwww. adaptivepath.com 

AskTog — Le site de Bruce Tognazzini, « évangélisateur en interface utilisateur » 
pendant 14 ans chez Apple, comporte de nombreux articles sur l’utilisabilité et 
fournit des conseils sur la conception des interfaces homme-machine. 
htp:/hwunv.askrog.com 


Capitaine Commerce - Le Capitaine et ses acolytes nous font partager avec 
humour leur passion du e-commerce au travers de commentaires, découvertes 
et réflexions sur le web marketing, le web analytique et l’utilisabilité. 
hetp:/fwuw.capitaine-commerce.com 


Ergologique — Ce site vise à sensibiliser les concepteurs et techniciens multi- 
média à la nécessité de réfléchir sur l’utilisabilité de l'interface. Il propose des 
conseils vulgarisés de conception ergonomique et des actualités quotidiennes 
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autour de l'ergonomie et du multimédia. 

http://www. ergologique .com 

ErgonomiA — Sandrine Promtep nous fait découvrir des méthodes et des 
évènements sur l’utilisabilité et le web 2.0. 


http: ffuuw.ergonomia.ca 


Ergonomie, Ruby on Raïls et Architecture de l’information web (2.0) — 
Frédéric de Villamil, QA Manager, nous livre une belle variété d'actualités sur 
les métiers de l'ergonomie web, l'expérience utilisateur et la stratégie produit. 


htp:/fuww.t37 net 


Ergophile : Analyse de l'ergonomie web — Jacinthe Busson partage son 
approche de l'ergonomie web et mobile ainsi que ses réflexions sur l’actualité 
des IHM. 

http://www.ergophile.com 

Expressions.be — Gaetano Palermo nous fait partager sa passion pour l'écriture 
dans les différentes formes et expressivités qu’elle revêt à travers le web. 


http:/fexpressions be 


Fred Cavazza - Dans ce blog, Frédéric Cavazza publie ses réflexions et ses 
découvertes sur l’utilisabilité, le e-marketing, le web 2.0 et les nouvelles 
technologies en général. 


hrtp:fffredcavazza.net 


Getelastic - Linda Bustos propose avec Getelastic un Blog traitant de l'expé- 
rience utilisateur dans l’E-commerce. 


hetp:ffuun. getelastic.com] 


L-ergo : Le bloc note - Raphaël Yharrassarry publie et partage des idées, sujets 
et informations sut les IHM, l'ergonomie et l'expérience utilisateur. 
ttp:ffblocnotes.iergo.fr 


InterfacesRiches.fr - Animé par Frédéric Cavazza (et quelques autres contri- 
buteurs) ce blog porte sur l’actualité des interfaces riches et leurs aspects 
fonctionnels et business. 


http:flwunv.interfacesriches.fr 


Johnny Holland - Collectif ouvert explorant le design d'interaction. 
ttp:/Hohnnyho .O" 

Journal of Usability Studies — Créé à l'initiative de l'association des profession- 

nels de l’utilisabilité (UPA), le Journal of Usability Studies présente des résultats 

d'études en ergonomie des interfaces (web, logiciel, téléphone, etc.). 

hep:/fwunv.upassoc.orglupa_publications/jus/ 

Le blog de Pascal Magnenat — Pascal Magnenat nous fait partager son regard 

attentif et surprenant sur l'expérience utilisateur et sur tout ce qui touche aux 

interactions homme-machine. 

htip://www.pascalmagnenat.ch 

Linearis, Blog — Maël Poulain, web designer, publie des anecdotes, actualités et 

autres informations surprenantes et originales sur le design d'interfaces. 

http://www linearis.friblog 
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Orange Cone - Blog de Mike Kuniavsky, fondateur d'Adaptive path. 
hecp:f/orangecone.com/ 


PIA blog — Blog présentant des outils, des évènements et une revue de presse 
mensuelle sur Les thèmes du design graphique, des technologies associées et de 
l'expérience utilisateur. 

hetp:f/blog.piaction.com 

QualityStreet — C’est l’un des rares blogs sur l'ergonomie informatique. Conçu 
par Jean-Claude Grosjean, ergonome spécialisé dans les méthodes et les proces- 
sus de développement logiciel, le blog présente les méthodes Agiles, la démarche 
ergonomique et traite également de gestion de projet, qualité et accessibilité. 


hip: www. qualicystreer.fr 


Simple Web — Blog de Frédéric Cavazza qui fait la part belle à tout ce qui se 
rapporte à la simplification et à l’utilisabilité des interfaces web. 
hetp:/hwunw.simpleweb.fr 


Smashing Magazine — Blog indépendant proposant des articles et ressources 
dans les domaines de la conception d'interface, du design numérique et du 
développement web. 

hetp://www.smashingmagazine.com/ 


Step Two Designs — Step Two Designs est une agence de conseil spécialisée 
dans la gestion de la connaissance (knowledge management). Plusieurs articles 
didactiques sur la problématique du savoir dans l’entreprise, la gestion du 
contenu et les intranets sont disponibles sur le site. 

hecp: hou. steptwo.com.au 


SuperFiction — Eric DI POL nous propose des actualités autour du marketing 
interactif et de la conception d'interface multimédia. 
http: {fwwuw.superfiction.net/blog 


Temesis — La qualité est un domaine étroitement lié à celui de l'utilisabilité. 
Le blog de Temesis est un des rares blogs dédiés à la qualité et l'accessibilité 
des sites web. On y trouvera de nombreuses ressources sur la conformité des 
développements web. 


http://blog.temesis.com 


The UX Booth — Collectif d'auteurs et de contributeurs. Créé par les membres 
de The UX Panel, c'est maintenant une communauté grandissante qui écrit 
dans diverses perspectives. 

het: {luww.uxbooth.com/ 


Usaddict - Notre blog propose des ressources sur l'ergonomie et la démarche 
de conception centrée utilisateur. Il s'adresse principalement aux concepteurs 
d'interface (ergonomes et designers} et présente des articles de fond, des études 
de cas, des outils et des méthodes sur l'ergonomie des interfaces. 


htip:/fwunw.ergonomie-incerface.com 


Useit.com — Le site de Jakob Nielsen est probablement le plus connu dans le 
domaine de l'utilisabilité. Il publie régulièrement une lettre, appelée alertbox, 
où il fait part de ses réflexions sur l’utilisabilité des sites web ec des rechnologies 
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associées. 
http: fwww.useit.com 

° Utilisabilité.info — Stéphanie Le Rouzic nous fait part d'évènements et de 
méthodes concernant l'utilisabilité, avec des articles toujours bien illustrés. 
http: ffwww.utilisabilite.info 

e UX matters - UX matters est un blog qui regroupe de nombreux articles 
sur la conception des interfaces et les méthodes de développement orientées 
utilisateur. [l couvre largement le domaine depuis les technologies utilisées, 
les méthodes, le management, l’organisation, ainsi que les ressources (livres, 
conférences, etc.). 
het: /hwuww.uxmatters.com 


+ UX Movement — Anthony Tseng propose un blog traitant d'interface utilisateur 
et d'expérience utilisateur. Les articles publiés offrent des solutions pratiques 
aux problèmes communs de la conception web. 


http:fluxmovement.com/ 


+ UXpassion - Blog qui promeut l'expérience utilisateur et fournit tutoriaux et 
astuces autour des outils suivants: WPF Silverlight, expression blend, expression 
design. 
hetp:/fwunw uxpassion.com/ 


e Yu blogue - Ce blog prodigue conseils, règles et méthodes pour la conception 
de systèmes interactifs et l'amélioration de l'expérience utilisateur. 


hecp:flww. vucentrik.calyu-blogue 


Design patterns et représentation de l'information 


e Baddesigns.com — Le site de Michael J. Darnell recense des problèmes d’utilisa- 
bilité sur les objets de la vie de tous les jours. Bien qu'il sorte du cadre du logiciel, 
on y trouve une profusion d'exemples montrant l'importance de la dimension 
ergonomique dans la conception des produits de consommation. 


hetb:ffwunw. baddesigns.com 


+ CaMarchePas — Un site présentant les témoignages vidéos d'expériences frus- 
trantes avec des machines. Une belle initiative de Pascal Magnenat, spécialiste 
des interactions homme-machine en Suisse et en Europe. 
hith:/faww.camarchepas.ch} 


+ Designing Interfaces — Un site bien documenté qui traite des design patterns à 
la fois des sites web et des interfaces logicielles. Il reprend en partie l’ouvrage 
du même nom de Jenifer Tidwell. 
hetp:/hwuw. designinginterfaces .com 

e Endeca Design Pattern Library — Un catalogue de design patterns bien fournis 
et surtout avec de nombreuses études de cas commentées, point par point. 
hetp:/patterns.endeca.com 

e Little Big Details — Blog recensant des designs patterns utilisés le plus souvent 
pour faciliter l'expérience utilisateur. Les pratiques sont expliquées et mises en 


; Dunod. 


0135 


A 


pyright € 


) 


[e 


c 


Ergonomie des interfaces 


perspective, que ce soit pour les applications web ou logicielles. 
hetp:/llittlebigdetails.com 

LOL Home — Un site de photos souvent humoristiques illustrant les problèmes 
d'ergonomie rencontrés au quotidien. 


http: www. lolhome.com 


Mobile Awesomeness — Un site à l'initiative de Brightwurks spécialisé dans la 
conception de site Web mobile. La galerie recense des sites web adaptés aux 
smartphones et qui offrent souvent une conception graphique de qualité. 
hetp:/luwww.mobileawesomeness.com 


Pattern Browser — Un catalogue très riche de design patterns proposé par 
l'Université de Postdam. 


http:/luwww.pattembrowser.org 


Patterney — Une initiative finlandaise d'échange de patterns utilisant le moteur 
de Flickr. Les fiches sont complètes et intéressantes. 
hetp:/{patternry.coml 


PatternTap — Une galerie de design patterns sans cesse enrichie. Les exemples 
manquent des recommandations d'usage mais ils favorisent l'inspiration en 
conception. 


hutp:{furww. patterniap.com 


Quince Infragistics — Un très riche et pratique catalogue interactif de design 
patterns. Doté d’une recherche par tags et de nombreux exemples, le dynamisme 
de l’interface est une expérience en elle-même. 

heth ; fquince ; infragistics .com 

Smileycat Elements of Design - Ce site propose une belle collection de design 
patterns actuels, idéale pour les concepteurs à la recherche de l'inspiration pour 
agencer les informations. 

http: /hwww.smileycat.com/ 


UI Patterns — UI Patterns est une bibliochèque de design patterns destinés 
à répondre à des problématiques de conception spécifique pour des sites ou 
des applications web. Pour chaque problématique, un exemple est fourni ainsi 
qu'une fiche explicative précisant l'usage du modèle. 


hrtb {lui -patterns.com 


We are colorblind — Un catalogue très utile en conception puisqu'il propose des 
design patterns et des modèles de représentation de l'information accessibles 
aux personnes atteintes de troubles de la vision tels que le daltonisme. 


http: /luwww. wearecolorblind.com 


Welie.com — Le site de Martijn van Welie fournit une bibliothèque détaillée de 
schémas de conception. Des recommandations accompagnent chaque modèle 
ainsi que des exemples d’interfaces. Le site présente principalement des 
exemples pour le web mais certains schémas peuvent être réutilisés pour des 
interfaces logicielles. 
hetb:/hwww.welie .com 
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Yahoo! Design Pattern Library - Le catalogue de design patterns à l'initiative 
de Yahoo! Les fiches pratiques sont bien documentées accompagnées de recom- 
mandations d'usage. Yahoo! y propose également des patterns plus riches et le 


code source associé 


hetp://developer.yahoo.com/ypatterns 


Guides de style pour la conception des interfaces 


La plupart des concepteurs de systèmes d'exploitation et d’interfaces applicatifs pro- 
posent une documentation en ligne — et parfois imprimable. Ces sites, généralement 
volumineux, sont appelés « guides de style ». Ils fournissent Les règles et les principes 
d'ergonomie à respecter pour concevoir des interfaces ergonomiques et interactives. 


Cette liste est maintenue à jour et actualisée sur notre blog Usaddict. 


. 


Android — User Interface Guidelines 
hetp://developer.android.com/guidelpracticeslui_guidelines/index.hrml 
Apple — Human Interface Guidelines pour Mac Os X et iOS : 
Mac Os X : http:/{developer.apple.comilibrary/mac/navigation/ 
iOS: http://developer.apple.com/library/ios/navigation/ 
Bada — Application UI Guide 
hecp:/{developer.bada.com/library/help.do?menu=MCO1 310100 
Blackberry - UT Guidelines 

ttp:{/4ocs .blackberry.com/en 
GNOME -— Human Interface Guidelines 
hup:/{developer.gnome.orgfhig-book/ 
Java — Java Look and Feel Design 
http:/ljava.sun.com/products/ilfled2/book/HIGTitle.alt.html 
KDE — User Interface Guidelines 

ttp://developer.kde .org/documentation/design/ui 
Microsoft - User Experience Guidelines pour Windows 7 Windows Phone : 


Windows ? : htip://msdn2.microsoft.com/en-us/library/aaS 1 1258.aspx 
Windows Phone 7 : http://msdn.microsoft.com/en-us/library/hh202915 


SAP - User Interface Guidelines 

http: /luwww. sapdesignguild.orgfresources/uiguidelines asp 
Yahoo! - Style Guide 

hutp:/{styleguide.yahoo.com/ 
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